Angular 2:* ngFor in * ngFor

时间:2017-04-24 04:56:05

标签: angular ngfor

以下方案在javascript中非常简单,但是我在Angular中遇到了一些问题。

我有一个类似的数组:

view.UpdateData()

使用ngFor我尝试现在创建一个网格,其中所有元素都在此列的colums和blocks中分隔。所以我现在的代码(工作但令人讨厌)。



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




我会为每一列运行这样的东西。这意味着我循环使用相同的数组12次。有什么方法可以做得更漂亮吗?

2 个答案:

答案 0 :(得分:5)

在您的组件中,使用JavaScript在右侧坐标处构建一个数组数组,其中包含 a 元素,然后使用* 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。

答案 1 :(得分:0)

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