Comment choisir le HTML en fonction de la valeur tout en utilisant ngFor dans angular4?

Question

je suis nouveau angulaire, supposons que j'ai un tableau de valeurs comme ce

domElement:Array<boolean>=[true,false,false,false,false,true,true,true]; 

et je veux différents html pour les vraies valeurs et différents html pour fausses valeurs tout en utilisant ngFor, je suivais ce blog et mis en œuvre cela, mais il ne fonctionne pas

ie.

 <div *ngFor="let n of domElement; let i=index"> 

<div *ngFor="let n of num; let i=index"> 

    <ng-template *ngIf="n; then gotValue else noValue"></ng-template> 

    <ng-template #noValue> 
     <div class="alert alert-warning"> 
      no value found - dummy element for no record !!! 
     </div> 
    </ng-template> 
    <ng-template #gotValue> 
     <div class="alert alert-success"> 
      got values !!! 
     </div> 
    </ng-template> 
</div> 

Answer 1

1. Si vous voulez un code différent pour seulement deux cas précis Scenerio alors vous devez utiliser. * ngIf/else pas * ngIf/then/else. Explanation here

<div *ngFor="let n of num"> <template1 *ngIf="n%2 === 0; else other_content"></template1> <template2 #other_content></template2> </div>

2. Si votre code ne change pas et seule chose qui change est le style que ce qui est préférable d'utiliser un composant commun avec le remplacement de style par ng directive de classe.

   • Angular doc. explanation of NgClass
   • SO Explanation

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

Answer 2

Est-ce ce que vous cherchez?

<div *ngFor="let n of num"> 
    <template1 *ngIf="n%2 === 0"></template1> 
    <template2 *ngIf="n%2 !== 0"></template2> 
</div> 

Answer 3

Je suppose que vous avez défini deux blocs différents avec le même nom il n'y a pas de bloc de #gotValue dans votre code essayer ceci:

<div *ngFor="let n of domElement"> 
    <ng-template *ngIf="n; then noValue else gotValue"></ng-template> 
    <ng-template #noValue> 
     <div class="alert alert-warning"> 
      no value found - dummy element for no record !!! 
     </div> 
    </ng-template> 
    <ng-template #gotValue> 
     <div class="alert alert-success"> 
      got values !!! 
     </div> 
    </ng-template> 
</div> 

Answer 4

<div *ngFor="let n of num; let i=index"> 
<div *ngIf="n%2===0;else gotValue"></div> 
    <div class="alert alert-warning"> 
     no value found - dummy element for no record !!! 
    </div> 
<ng-template #gotValue> 
    <div class="alert alert-success"> 
     got values !!! 
    </div> 
</ng-template> 

Vous n'avez pas besoin NoValue ng-modèle. Cela a fonctionné pour moi. J'espère que cela aide.