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>