angular - tag - ngtemplateoutlet

¿Por qué*ng? Si no funciona con ng-template?

Question

Tengo una condición en la plantilla de la siguiente manera:

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

Tengo un conjunto de datos que contiene row y seatNo , pero parece que no se imprime en la plantilla. ¿Cuál es el problema aquí?

Answer 1

Lea el documento aquí https://angular.io/guide/structural-directives especialmente para

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

El asterisco es "azúcar sintáctica" para algo un poco más complicado. Internamente, Angular la desugara en dos etapas. Primero, traduce el * ngIf = "..." en un atributo de plantilla, template = "ngIf ...", así.

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

Luego, traduce el atributo de plantilla en un elemento, envuelto alrededor del elemento host, como este.

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

• La directiva * ngIf se movió al elemento donde se convirtió en un enlace de propiedad, [ngIf].
• El resto de, incluido su atributo de clase, se movió dentro del elemento.

Así que para ello tenemos ng-container

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

o use span o div o la etiqueta html regular.

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

o si aún desea usar ng-template ( no recomendado )

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