为什么 * 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，但它似乎不打印在模板。有什么问题吗？

92132 次浏览
小开
最佳答案

Read the doc here https://angular.io/guide/structural-directives especially for

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

So for it we have ng-container

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

or use span or div or regular html tag.

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

or if you still want to use ng-template (not recommended)

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

提交答案