* ng 만 사용하는 방법?
답변:
각도 4와 5 :
사용하여 else:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>당신은 또한 사용할 수 있습니다 then else:
<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>또는 then혼자 :
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>데모 :
세부:
<ng-template>: MDN<template> 에 따른 Angular의 자체 태그 구현입니다 .
HTML
<template>요소는 페이지가로드 될 때 렌더링되지 않지만 나중에 JavaScript를 사용하여 런타임 중에 인스턴스화 될 수있는 클라이언트 측 컨텐츠를 보유하는 메커니즘입니다.
<ng-container>if 절에 사용할 수 있습니다
ng-container템플릿에 대한 * ngIf이 들어있는 컨테이너가 아니라
*ngIf 일을 할 수 없었 ng-template습니까?
Angular 4.xx에서 당신은 사용할 수 있습니다 ngIf를 다른 절차의 경우 간단한 달성하기 위해 네 가지 방법 :
그냥 사용 하는 경우
<div *ngIf="isValid"> If isValid is true </div>사용 그밖에를 가진 경우 (에 제발 통지 TEMPLATENAME )
<div *ngIf="isValid; else templateName"> If isValid is true </div> <ng-template #templateName> If isValid is false </ng-template>사용하여 다음과 경우 (에 제발 통지 TEMPLATENAME )
<div *ngIf="isValid; then templateName"> Here is never showing </div> <ng-template #templateName> If isValid is true </ng-template>사용 If와 When과 Else를 함께
<div *ngIf="isValid; then thenTemplateName else elseTemplateName"> Here is never showing </div> <ng-template #thenTemplateName> If isValid is true </ng-template> <ng-template #elseTemplateName> If isValid is false </ng-template>
팁 : ngIf 는 표현식을 평가 한 다음 표현식이 진실하거나 거짓 일 때 then 또는 else 템플릿을 그 자리에 . 일반적으로
- 그때 template은 다른 값에 바인딩되지 않은 경우 ngIf 의 인라인 템플릿입니다 .
- 그렇지 않으면 템플릿이 바인딩되어 있지 않으면 비어 있습니다.
...; else .... 아마도 ;제거해야합니다.
...; else ...작동했습니다
"bindEmail"이메일 사용 가능 여부를 확인합니다. 이메일이 존재하는 경우 로그 아웃이 표시되고 그렇지 않으면 로그인이 표시됩니다
<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>
이것을 사용 <ng-container>하고 <ng-template>달성 할 수 있습니다
<ng-container *ngIf="isValid; then template1 else template2"></ng-container>
<ng-template #template1>
<div>Template 1 contains</div>
</ng-template>
<ng-template #template2>
<div>Template 2 contains </div>
</ng-template>
아래에서 Stackblitz Live 데모를 찾을 수 있습니다.
희망이 도움이 될 것입니다 ... !!!
대한 각도 9/8
예제와 소스 링크
export class AppComponent {
isDone = true;
}
1) * ngIf
<div *ngIf="isDone">
It's Done!
</div>
<!-- Negation operator-->
<div *ngIf="!isDone">
It's Not Done!
</div>
2) * ngIf 및 기타
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>
3) * ngIf, 그때 그리고 다른
<ng-container *ngIf="isDone; then iAmDone; else iAmNotDone">
</ng-container>
<ng-template #iAmDone>
It's Done!
</ng-template>
<ng-template #iAmNotDone>
It's Not Done!
</ng-template>
ngIf / Else의 구문
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
NgIf / Else / 그리고 명시 적 구문 사용
템플릿을 추가하려면 템플릿에 템플릿을 명시 적으로 바인딩하면됩니다.
<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div>
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>
NgIf 및 비동기 파이프로 관찰 가능
Angular 8에서 새로운 업데이트를 추가하십시오.
- 다른 경우에는 ngIf 및 ngIfElse를 사용할 수 있습니다 .
<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>- 그렇다면 그렇다면 ngIf 와 ngIfThen을 사용할 수 있습니다 .
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
This content is never showing
</ng-template>
<ng-template #thenBlock>
Content to render when condition is true.
</ng-template>- 경우에 따라 다른 경우에는 ngIf , ngIfThen 및 ngIfElse를 사용할 수 있습니다 .
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
This content is never showing
</ng-template>
<ng-template #thenBlock>
Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>Angular 4.0 if..else구문은 Java의 조건부 연산자와 매우 유사합니다.
Java에서는을 사용합니다 "condition?stmnt1:stmnt2".
Angular 4.0에서는을 사용 *ngIf="condition;then stmnt1 else stmnt2"합니다.
ngif 표현식 결과 값은 부울 true 또는 false가 아닙니다.
표현이 단지 대상이라면, 여전히 그것을 진실성으로 평가합니다.
객체가 정의되지 않았거나 존재하지 않으면 ngif는이를 거짓으로 평가합니다.
일반적으로로드 된 객체가있는 경우이 객체의 내용을 표시하고 그렇지 않으면 "loading ......."을 표시합니다.
<div *ngIf="!object">
Still loading...........
</div>
<div *ngIf="object">
<!-- the content of this object -->
object.info, object.id, object.name ... etc.
</div>
또 다른 예:
things = {
car: 'Honda',
shoes: 'Nike',
shirt: 'Tom Ford',
watch: 'Timex'
};
<div *ngIf="things.car; else noCar">
Nice car!
</div>
<ng-template #noCar>
Call a Uber.
</ng-template>
<!-- Nice car ! -->
anthoer 예제 :
<div *ngIf="things.car; let car">
Nice {{ car }}!
</div>
<!-- Nice Honda! -->
각도 4, 5 및 6에서
템플릿 참조 변수 [2] 를 만들어 * ngIf 지시문 내의 else 조건에 연결하면됩니다.
가능한 구문 [1] 은 다음과 같습니다.
<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>
<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>
<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>
<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>
데모 : https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html
출처 :
나는 이것이 오래되었다는 것을 알고 있지만 도움이된다면 추가하고 싶습니다. 내가했던 방법은 구성 요소에 두 개의 플래그가 있고 해당하는 두 플래그에 대해 두 개의 ngIfs가있는 것입니다.
템플릿과 재료가 잘 작동하지 않았기 때문에 간단하고 재료와 잘 작동했습니다.