web-dev-qa-db-ja.com

Angular 2：* ngFor in * ngFor

次のシナリオはJavaScriptではかなり簡単ですが、Angularで動作させるのにいくつかの問題が発生しました。

私は次のような配列を得ました：

array a = ( "id" = 0, name = random(), column = 1, 2 or 3, blockrow= 1, 2 or 3)

NgForでグリッドを作成して、この列の列とブロックに分離されたすべての要素を取得します。だから私の現在のコード（動作しますが厄介です）。

<div *ngFor="let a of a">
  <template [ngIf]="a.column=='1'">
    <div *ngFor="let b of a">
      <template [ngIf]="b.blockrow=='1'">
        Block 1 in column 1{{b.name}}
      </template>
    </div>
    <div *ngFor="let b of a">
      <template [ngIf]="b.blockrow=='2'">
        Block 2 in column 1{{b.name}}
      </template>
    </div>
    <div *ngFor="let b of a">
      <template [ngIf]="b.blockrow=='3'">
        Block 3 in column 1{{b.name}}
      </template>
    </div>
  </template>
</div>

このようなものをすべての列で実行します。つまり、同じ配列を12回ループします。より美しくする方法はありますか？

angularngfor
5
Doomenik

コンポーネントで、JavaScriptを使用して、正しい座標にaの要素を含む配列の配列を構築し、次に* ngFor内で* ngForを使用します。

<div *ngFor="let row of rows">
  <div *ngFor="let col of row">
    Block {{col.blockrow}} in column {{col.column}} {{col.name}}
  </div>
</div>

複数のブロックが同じ座標を持つ場合、3番目の* ngForが必要になる場合があります。

7
Philippe

間違った構文を使用しています*ngIf の代わりに [ngIf]

<div *ngFor="let a of a">
  <template *ngIf="a.column=='1'">
    <div *ngFor="let b of a">
      <template *ngIf="b.blockrow=='1'">
        Block 1 in column 1{{b.name}}
      </template>
    </div>
    <div *ngFor="let b of a">
      <template *ngIf="b.blockrow=='2'">
        Block 2 in column 1{{b.name}}
      </template>
    </div>
    <div *ngFor="let b of a">
      <template *ngIf="b.blockrow=='3'">
        Block 3 in column 1{{b.name}}
      </template>
    </div>
  </template>
</div>
0
Aravind