Angular版本4.x表行组件

Question

我正在尝试创建一个可以在表格中用作行的组件。

<table class="table">
  <tbody>
    <my-row *ngFor="let id of ids" [id]="id"></my-row>
  </tbody>
</table>

当我这样做时，所有行都出现在一行上。

这是一个问题是什么以及我期待什么的例子。

https://plnkr.co/edit/37fRFlMNVqoQTg4UKBcu?p=preview

Answer 1

您可以使用属性选择器

来获得所需的结果

<tr my-row *ngFor="let id of ids"  [id]="id"></tr>

@Component({
  selector: '[my-row]',
  template: `<td>{{ id }}</td>`,
})
export class Row {
  @Input() id;
}

<强> Forked Example