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

У меня есть условие в шаблоне следующим образом:

<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, но он не печатает в шаблоне. в чем проблема?

Ответ 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>

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

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

Ответ 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-template ngIf