*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
'programing' 카테고리의 다른 글
디렉토리의 모든 파일에 대해 프로그램을 실행하기 위해 Powershell을 사용하는 방법 (0) | 2023.09.16 |
---|---|
Swift UI 보기 - viewDidLoad()? (0) | 2023.09.16 |
PHP에서 다운로드할 파일을 생성한 후 리디렉션 (0) | 2023.09.16 |
GCC: 상수 변수가 .rodata에 없는 이유 (0) | 2023.09.16 |
C#을 이용하여 DataSet에서 여러 장의 시트로 엑셀파일을 만드는 방법 (0) | 2023.09.16 |