Угловой 2: * ngFor in * 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 раз. Есть ли способ сделать это красивее?

angular ngfor

6

Doomenik 24 Апр 2017 в 07:56

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 может потребоваться, если несколько блоков имеют одинаковые координаты.

7

Philippe 24 Апр 2017 в 20:46

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>

0

Aravind 24 Апр 2017 в 05:00

Угловой 2: * ngFor in * ngFor

2 ответа

Похожие вопросы

Новые вопросы

angular