如何在Angular 7中向表格添加行组件？

Question

我使用最新版本的Angular(7.2.0)。 我有一个个人的tr组件，如下：

import { Component, OnInit, Input } from '@angular/core';

@Component({
selector: 'app-table-row',
templateUrl: './table-row.component.html',
styleUrls: ['./table-row.component.scss']
})
export class TableRowComponent implements OnInit {
@Input() character: any;
@Input() columns: string[];

constructor() { }

ngOnInit() {
}

}

我希望在表格中使用这个组件，例如：

<table class="mat-elevation-z8">
<tr>
   <th *ngFor="let c of columns">{{c}}</th>
</tr>
<tr app-table-row class="component-style table-row-component" *ngFor="let ch of characters | async" 
   [character]="ch" 
  [columns]="columns">
</tr>

</table>

出现如下错误:

Can't bind to 'character' since it isn't a known property of 'tr'. ("table-row class="component-style table-row-component" *ngFor="let ch of characters | async" 
       [ERROR ->][character]="ch" 
      [columns]="columns">
  </tr>
"): ng:///AppModule/TableComponent.html@7:7

如何在表格中正确添加我的组件？

- user504909

Answer 1

将组件选择器定义为带有方括号的属性选择器：

@Component({
  selector: 'tr[app-table-row]',
  ...
})

这样它就可以作为tr元素的属性设置：

<tr app-table-row ...>

- ConnorsFan

---

谢谢。它可以工作，但是根据 https://angular.io/guide/styleguide#style-05-03. 这是 eslint 的错误风格。 - user504909

正如样式指南所说：“有一些情况下，你会给一个组件添加属性，例如当你想增强内置元素时。”这恰好是你的情况：你正在增强tr元素（而不是向DOM添加自定义元素）。 - ConnorsFan

@ConnorsFan：先生，您能告诉我如何使用with td吗？ - Kapil Soni

Answer 2

选择属性 'tr[app-table-row]' 的方法在每次只需要生成一行数据时是可行的，但如果需要生成多行数据，例如需要使用多行合并，这种方法就会变得繁琐。

在这种情况下，只需使用常规选择器'app-table-rows'并将组件的宿主显示设置为内容即可。

:host {
  display: contents;
}

demo

- Flavien Volken

---

这完美地适合我的问题。谢谢！ - i3asm

Answer 3

正如@ConnorsFan所提到的，您需要通过在组件选择器中添加方括号来将其定义为属性，但无需在其前面添加“tr”，因此以下内容应该是可以的：

@Component({
  selector: '[app-table-row]',
  ...
})

然后按照以下方式使用：

<tr app-table-row 
    *ngFor="let item of items"
    [myProp]="item"
    (myEvent)="executeEvent($event)"
    ...>
</tr>

- Stacked

---

在方括号前添加“tr”限制了组件的使用范围仅限于“tr”元素。如果组件包含“td”和“th”元素，则这可能是我们想要的。 - ConnorsFan