角度コンポーネントテーブルの各ループにネストされる場所はどこですか？

Question

私は各ループの中に表示されるいくつかのテーブルを持っています。各テーブルの行には、2つのループが追加されています。どちらもループ内の項目に適用されます。

各ループの2番目の文字をどこに置くかわかりません。私はこのような何かをすることができます

<div *ngFor="let table of tables">{{table}} 
    <table> 
    <tr *ngFor="let item of key">{{item.name}}</tr> 
    </table> 
</div> 

最初のデータセットを表示します。しかし、私がtrに表示する必要があるプロパティのいくつかはitemの配列内に入れ子になっていますので、それぞれにもう一つ必要です。

最初の試みは別のタグを追加しようとしました（div/spanのサラウンドtr、キーの項目を* ngForに移動して、最後の* ngForをtrに追加します）が、tbody /テーブル：

<div *ngFor="let table of tables">{{table}} 
    <table> 
    <div *ngFor="let item of key"> 
     <tr *ngFor="let subItem of item"> 
     <td>{{item.name}}</td> 
     <td>{{subItem.address}}</td> 
     </tr> 
    <div> 
    </table> 
</div> 

有効なタグはありますか？ 1つのタグで2つの* ngForを実行できますか？

Answer 1

あなたは、TDにこの第二の場合には、適切なマークアップは、このデータが構築されているかに依存します

<tr *ngFor="let item of key"> 
    <td>{{item.name}}</td> 
    <td>{{item.otherAttr}}</td> 

    <td *ngFor="let subItem of item.someAttrThatIsAnArray"> 
    {{subItem}} 
    </td> 
</tr> 

よう

何かをngForを行う必要があります。

Answer 2

各ループの最後にng-containerタグを使用できます。したがってコードは次のようになります

<div *ngFor="let table of tables">{{table}} 
    <table> 
    <ng-container *ngFor="let item of key"> 
     <tr *ngFor="let subItem of item"> 
     <td>{{item.name}}</td> 
     <td>{{subItem.address}}</td> 
     </tr> 
    <ng-container> 
    </table> 
</div>