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

实现期望的结果