Angular 2: ngFor 中的 ngFor

Question

下面的场景在 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 次。有什么办法可以做得更漂亮吗？

Answer 1

您使用的语法错误应该是 *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>

Answer 2

在您的组件中，使用 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>

如果几个块具有相同的坐标，则可能需要第三个 *ngFor。

Angular 2: ngFor 中的 ngFor

Angular 2: ngFor in ngFor

ngfor

angular

Angular 2: *ngFor 中的 *ngFor

Angular 2: *ngFor in *ngFor

ngfor

angular

Angular 2: ngFor 中的 ngFor

Angular 2: ngFor in ngFor