web-dev-qa-db-fra.com

pourquoi * ngIf ne fonctionne pas avec ng-template?

J'ai une condition dans le modèle comme suit:

<ng-container>
    <p *ngFor="let seat of InfoDetails?.seatInfo">
        <template *ngIf="seat.section">
            Section {{seat?.section}} ,
        </template>
        <template *ngIf="seat.row">
            Row {{seat?.row}},
        </template>
        <template *ngIf="seat.seatNo">
            Seat number {{seat?.seatNo}}
        </template>
    </p>
</ng-container>

J'ai un ensemble de données contenant row et seatNo, mais il ne semble pas apparaître dans le modèle. Quel est le problème ici?

angularangular2-templateng-template
32
face turn

Lisez la doc ici https://angular.io/guide/structural-directives spécialement pour

<div *ngIf="hero" >{{hero.name}}</div>

L'astérisque est "sucre syntaxique" pour quelque chose d'un peu plus compliqué. En interne, Angular le sépare en deux étapes. Premièrement, il traduit le * ngIf = "..." en un attribut de modèle, template = "ngIf ...", comme ceci.

<div template="ngIf hero">{{hero.name}}</div>

Ensuite, il traduit l'attribut template en un élément, enroulé autour de l'élément Host, comme ceci.

<ng-template [ngIf]="hero"> <div>{{hero.name}}</div></ng-template>

  • La directive * ngIf a été déplacée vers l'élément où elle est devenue une liaison de propriété, [ngIf].
  • Le reste de la, y compris son attribut de classe, s'est déplacé à l'intérieur de l'élément.

Donc pour cela nous avons ng-container

 <ng-container *ngIf="seat.section">
    Section {{seat.section}} ,
 </ng-container>

ou utilisez span ou div ou une balise HTML normale.

 <span *ngIf="seat.section">
    Section {{seat.section}} ,
 </span>

ou si vous voulez toujours utiliser ng-template ( non recommandé )

<ng-template [ngIf]="seat.section">
  Section {{seat.section}} ,
</ng-template>
66
Fetrarij