为什么 *ngIf 不适用于 ng-template? [英] why *ngIf doesnt'work with ng-template?
问题描述
我在模板中有一个条件如下:
<p *ngFor="让 InfoDetails 的座位?.seatInfo"><模板 *ngIf="seat.section">部分 {{seat?.section}} ,模板><模板 *ngIf="seat.row">第 {{seat?.row}},模板><模板 *ngIf="seat.seatNo">座位号{{seat?.seatNo}}模板></p></ng-容器>
我有包含 row
和 seatNo
的数据集,但它似乎没有在模板中打印.这里有什么问题?
在此处阅读文档 https://angular.io/guide/structural-directives 特别适用于
<块引用><div *ngIf="hero" >{{hero.name}}</div>
星号是多一点的语法糖"复杂的.在内部,Angular 分两个阶段对其进行脱糖.首先,它将 *ngIf="..." 转换为模板属性,template="ngIf...",就像这样.
然后它把模板属性翻译成一个元素,包裹在宿主元素上,像这样.
- *ngIf 指令移动到元素,在那里它成为一个属性绑定,[ngIf].
- 的其余部分,包括它的 class 属性,移动到元素内部.
所以我们有 ng-container
部分 {{seat.section}} ,</ng-容器>
或使用 span 或 div 或常规 html 标签.
部分 {{seat.section}} ,</span>
或者如果你仍然想使用 ng-template (不推荐)
部分 {{seat.section}} ,</ng-模板>
I have a condition in the template as follows:
<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>
I have dataset that contains row
and seatNo
, but it does not seem to print in the template. what is the issue here?
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>
这篇关于为什么 *ngIf 不适用于 ng-template?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!