Angular 2：*ngFor中的*ngFor

Question

以下情况在javascript中很容易实现，但我在Angular中遇到了一些问题。

我有一个像这样的数组：

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

我现在尝试使用ngFor创建一个网格，其中所有从get中获取的元素都分别放置在列和块中。目前我的代码可以正常工作，但很糟糕。

<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次循环。有没有更优美的方法来实现呢？

- Doomenik

Answer 1

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

- Philippe

---

我可以这样使用多维数组。非常感谢，这正是我想要的。 - Doomenik

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>

- Aravind

---

改了一下，编辑器使用的是Angular 1，但这不是我的问题。我只想知道有没有办法让循环不那么频繁地运行。 - Doomenik

我不明白你的意思。 - Aravind

在我的例子中，我循环遍历同一个数组4次。为了使它完全工作，我需要这个3次，也就是说要循环遍历同一个数组12次。在我看来，这非常低效。在普通的JS中，我只需要一次遍历数组就可以做到同样的效果。所以我的问题是，有没有一种更好的方法来处理这个代码块？比如如果b.blockrow == 1 -> 添加到div1，如果b.blockrow == 2添加到div2。 - Doomenik

顺便说一下，我在我的Angular应用程序中尝试了你的更改，使用*ngIf它不起作用。文档还说模板使用[ngIf]。 - Doomenik

@Doomenik 看一下 ngSwitch。 - Christopher Moore