web-dev-qa-db-fra.com

Angulaire 2 conditionnel ngFor

J'essaie de nettoyer mon code de modèle. J'ai le suivant:

<ul>
  <li *ngIf="condition" *ngFor="let a of array1">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>
  <li *ngIf="!condition" *ngFor="let b of array2">
    <p>{{b.firstname}}</p>
    <p>{{b.lastname}}</p>
  </li>
</ul>

Existe-t-il un moyen de choisir conditionnellement array1 ou array2 pour effectuer une itération à l'aide de *ngIf ou de quelque chose afin que je n'ai pas à répéter autant de code modèle? C'est juste un exemple; Mon <li> actuel contient beaucoup plus de contenu, donc je ne veux vraiment pas me répéter. Merci!

angularangular-ng-ifngfor
7
7ball
  <li *ngFor="let a of (condition ? array1 : array2)">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>
28
Matej Maloča

Utilisez une balise de modèle avec un [ngIf] en dehors de la boucle ngFor.

<ul>
  <template [ngIf]="condition">
   <li *ngFor="let a of array1">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
   </li>
  </template>
  <template [ngIf]="!condition">
   <li *ngFor="let b of array2">
    <p>{{b.firstname}}</p>
    <p>{{b.lastname}}</p>
   </li>
  </template>
</ul>

Consultez également la syntaxe des modèles ici: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

0
Peter Salomonsen

Nous pouvons masquer l'élément à l'aide de la propriété d'affichage bootstrap, en fonction de la condition.

<li [ngClass]="{'d-none': condition}" *ngFor="let a of array1">
 <p>{{a.firstname}}</p>
 <p>{{a.lastname}}</p>
</li>
0
mahesh

Vous pouvez utiliser le ng-container qui n'est pas reconnu par le DOM et ne sera donc utilisé que pour une condition. Voir exemple ci-dessous:

 <tr *ngFor="let company of companies">
        <ng-container *ngIf="company.tradingRegion == 1">
            <td>{{ company.name }}</td>
            <td>{{ company.mseCode }}</td>
         </ng-container>
  </tr>

Le code ci-dessus va:

Afficher une liste de toutes les entreprises où tradingRegion == 1

`

0
Mwizak

Vous ne pouvez pas avoir à la fois un *ngFor et un *ngIf dans le même élément. Vous pouvez créer un élément dans le <li> avec le *ngFor. Comme:

<li *ngIf="condition">
    <ul>
        <li *ngFor="let a of array1">

Ou utilisez la condition à l'intérieur du *ngFor. Comme ça:

<li *ngFor="let a of (condition?array1:array2)">

Ou vous pouvez utiliser un modèle comme Peter Salomonsen demandé.

0
nick zoum