首页 文章

Angular 2：* ngFor in * ngFor

提问于
浏览 次
3

以下场景在javascript中非常容易，但是我在Angular中遇到了一些问题 .

我有一个像这样的数组：

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

使用ngFor我尝试现在创建一个网格，其中所有元素都在此列的colums和blocks中分隔 . 所以我目前的代码（工作但令人讨厌） .

<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次 . 有什么方法可以做得更漂亮吗？

angular ngfor

2 回答

  • 0

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

    回复于
  • 5

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

相关问题