为什么 *ngIf 不适用于 ng-template？

Question

我在模板中有一个条件如下：

<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 的数据集，但它似乎没有打印在模板中。这里有什么问题？

Answer 1

在此处阅读文档 https://angular.io/guide/structural-directives 特别是

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

The asterisk is "syntactic sugar" for something a bit more complicated. Internally, Angular desugars it in two stages. First, it translates the *ngIf="..." into a template attribute, template="ngIf ...", like this.

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

Then it translates the template attribute into a element, wrapped around the host element, like this.

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

The *ngIf directive moved to the element where it became a property binding,[ngIf].

The rest of the , including its class attribute, moved inside the element.

所以我们有 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 (not recommended)

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

为什么 *ngIf 不适用于 ng-template？

why *ngIf doesnt'work with ng-template?

angular

angular2-template

ng-template