Angulaire 2 conditionnelle ngFor
Je suis en train de nettoyer mon code de modèle. J'ai le texte 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>
Est-il un moyen pour conditionnellement choisir array1
ou array2
pour parcourir à l'aide de *ngIf
ou quelque chose alors que je n'ai pas à répéter autant de code de modèle? C'est juste un exemple; mon <li>
contient beaucoup plus de contenu, donc je ne veux vraiment pas me répéter. Merci!
Vous devez vous connecter pour publier un commentaire.
Vous pouvez faire usage de la
ng-container
qui n'est pas reconnue par DOM, donc ne sera utilisé que pour un état. Voir l'exemple ci-dessous:Le code ci-dessus va: `
`
Utiliser une balise de modèle avec un [ngIf] en dehors de la ngFor boucle.
Lire aussi à propos de la syntaxe du modèle ici: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-modèle
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 à l'intérieur de la<li>
avec le*ngFor
. Comme:Ou utiliser le conditionnel à l'intérieur de la
*ngFor
. Comme ceci:Ou vous pouvez utiliser un modèle comme Peter Salomonsen chargé.
Nous ne pouvons cacher l'élément à l'aide de bootstrap propriété d'affichage, en fonction de la condition.