为什么* ngIf与ng-template不兼容? [英] why *ngIf doesnt'work with 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的数据集，但似乎没有在模板中打印.这是什么问题?

I have dataset that contains row and seatNo, but it does not seem to print in the template. what is the issue here?

推荐答案

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

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

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

星号是语法糖" 复杂.在内部，Angular将其分为两个阶段.首先，它 将* ngIf ="..."转换为模板属性template ="ngIf ..."，像这样.

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>

• * ngIf指令移至成为属性绑定的元素，[ngIf].
• 的其余部分(包括其class属性)在元素内移动.

因此，我们有ng-container

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

或使用span或div或常规html标签.

or use span or div or regular html tag.

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

，或者如果您仍要使用ng-template(不推荐， )

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