角度バージョン4.xテーブル行コンポーネント

Question

テーブル内の行として使用できるコンポーネントを作成しようとしています。

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

これを行うと、すべての行が1行に表示されます。

ここに、問題の内容と私が期待していることの例があります。

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

を使用して所望の結果を達成することができます