为什么 *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>

星号是"句法糖"，表示更多的东西 复杂。在内部，Angular分两个阶段进行脱糖。首先，它 翻译 *ngIf="..."到模板属性中，模板="ngIf ..."，就像这样。

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

然后，它将模板属性转换为 元素，包裹在主机元素周围，如下所示。

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