web-dev-qa-db-fra.com

Angular 2: * ngFor dans * ngFor

Le scénario suivant serait assez facile en javascript mais j'ai eu quelques problèmes pour le faire fonctionner en angulaire. 

J'ai un tableau comme:

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

Avec ngFor, j’essaie de créer maintenant une grille où tous les éléments d’un élément sont séparés en colonnes et en blocs dans cette colonne. Donc, mon code actuel (fonctionne mais méchant).

<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>

Quelque chose comme ça, je cours pour chaque colonne. Ce qui signifie que je boucle dans le même tableau à 12 reprises. Y a-t-il un moyen de le faire plus beau? 

angularngfor
3
Doomenik

Dans votre composant, utilisez JavaScript pour créer un tableau de tableaux contenant les éléments de a aux bonnes coordonnées, puis utilisez * ngFor dans * ngFor:

<div *ngFor="let row of rows">
  <div *ngFor="let col of row">
    Block {{col.blockrow}} in column {{col.column}} {{col.name}}
  </div>
</div>

Un troisième * ngFor peut être nécessaire si plusieurs blocs ont les mêmes coordonnées.

4
Philippe

Vous utilisez une syntaxe incorrecte devrait être *ngIf au lieu de [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