Angular 2：* ngFor in * ngFor

Question

以下情況在javascript中很容易，但我在使用Angular時遇到了一些問題。

我像一個數組：

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

隨着ngFor我現在嘗試創建一個網格存在的所有元素出在此列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

在你的組件，使用JavaScript來構建一個數組的數組與一個在正確的座標中的元素，然後使用* ngFor inside * ngFor：

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

如果幾個塊具有相同的座標，則可能需要第三個* ngFor。

Answer 2

您正在使用錯誤的語法應該是*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>