Почему *ngIf не работает с ng-шаблоном?

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 desugars это в два этапа. Во-первых, он переводит *ngIf="..." в атрибут шаблона, template="ngIf ...", вот так.

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

Затем он переводит атрибут шаблона в элемент, обернутый вокруг элемента host, вот так.

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

Answer 2

В HTML ==>

    <div *ngIf="checkValue(seat.section)">
        Section {{seat?.section}} ,
    </div> 

В файле TS вы можете написать, чтобы проверить строка имеет значение или нет

 checkValue(selection:string){
 if(selection!=null && selection!==undefined){
 return true;
 }
 return false;
 }

Проверьте правильный формат для ng-шаблона ngIf