角2：* ngForの中で

Question

次のシナリオはjavascriptではかなり簡単ですが、Angularで作業するにはいくつかの問題があります。 ngForで

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

は、私が今そこグリッドこのコラムでcolumsとブロックで離れ離れのうち、すべての要素を作成しよう：

は、私のような配列を得ました。だから私の現在のコード（作品が厄介です）。このような

<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回繰り返します。もっと美しくする方法はありますか？

Answer 1

[ngIf]、使用した後、右側の座標での要素を持つ配列の配列を構築するためにJavaScriptを使用する必要があります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が必要になることがあります。

Answer 2

あなたは間違った構文を使用していること* *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>