web-dev-qa-db-ja.com

なぜ* ngIfがng-templateで動作しないのですか？

テンプレートには次のような条件があります。

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

rowとseatNoを含むデータセットがありますが、テンプレートに印刷されていないようです。ここの問題は何ですか？

angularangular2-templateng-template
32
face turn

ここでドキュメントを読む https://angular.io/guide/structural-directives 特に

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

アスタリスクは、もう少し複雑なものの「構文糖」です。内部的に、Angularは2段階で脱糖します。最初に、* ngIf = "..."を次のようなテンプレート属性template = "ngIf ..."に変換します。

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

次に、テンプレート属性を、このようにHost要素をラップした要素に変換します。

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

  • * ngIfディレクティブは、プロパティバインディングになった要素[ngIf]に移動しました。
  • クラス属性を含むの残りは、要素内に移動しました。

そのため、ng-containerがあります

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

または、span、div、または通常のhtmlタグを使用します。

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

または、まだng-templateを使用する場合（ 非推奨 ）

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