programing

*ngIf가 ng-template와 작동하지 않는 이유는 무엇입니까?

stoneblock 2023. 9. 16. 08:30

*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, 템플릿에 인쇄되지 않는 것 같습니다.여기서 무슨 문제가 있습니까?

여기 https://angular.io/guide/structural-directives 에서 특히 다음과 같은 문서를 읽으십시오.

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

별표는 조금 더 복잡한 것을 의미하는 "신택틱 설탕"입니다.내부적으로 Angular는 두 단계로 나누어 당을 풉니다.먼저 *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>

스판이나 디브, 일반 html 태그를 사용합니다.

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

또는 여전히 ng-limit을 사용하고 싶은 경우(권장되지 않음)

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

언급URL : https://stackoverflow.com/questions/44837756/why-ngif-doesntwork-with-ng-template