pourquoi *ngIf ne fonctionne pas avec ng-template ?

Question

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 qui contient row y seatNo mais il ne semble pas s'imprimer dans le modèle. Quel est le problème ?

Answer 1

Lisez le document ici https://angular.io/guide/structural-directives notamment pour

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

L'astérisque est "syntactique". compliqué. En interne, Angular le désucre en deux étapes. Tout d'abord, 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 du modèle en un fichier enroulé autour de l'élément hôte, comme ceci.

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

• La directive *ngIf s'est déplacée vers l'élément où elle est devenue une liaison de propriété, [ngIf].
• Le reste de l'élément , y compris son attribut class, a été 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 utiliser span ou div ou une balise html ordinaire.

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