* ng 만 사용하는 방법?

* ng 만 사용하는 방법?

---

Angular를 사용하고 있으며이 *ngIf else예제에서 (버전 4부터 사용 가능) 을 사용하고 싶습니다 .

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

같은 동작을 ngIf else어떻게 달성 할 수 있습니까?

---

각도 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를 사용하여 런타임 중에 인스턴스화 될 수있는 클라이언트 측 컨텐츠를 보유하는 메커니즘입니다.

---

각도 4.XX에서 당신은 사용할 수 있습니다 ngIf를 다른 절차의 경우 간단한 달성하기 위해 네 가지 방법 :

1. 그냥 사용 하는 경우

   <div *ngIf="isValid">
       If isValid is true
   </div>
   

2. 사용 을 가진 경우 그렇지 (에 제발 통지 TEMPLATENAME )

   <div *ngIf="isValid; else templateName">
       If isValid is true
   </div>
   
   <ng-template #templateName>
       If isValid is false
   </ng-template>
   

3. 사용하여 다음과 경우 (에 제발 통지 TEMPLATENAME )

   <div *ngIf="isValid; then templateName">
       Here is never showing
   </div>
   
   <ng-template #templateName>
       If isValid is true
   </ng-template>
   

4. 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 템플릿을 그 자리에 렌더링합니다 . 일반적으로

• 다음 템플릿의 인라인 템플릿입니다 ngIf 다른 값에 바인딩하지 않는.
• 그렇지 않으면 템플릿이 바인딩되어 있지 않으면 비어 있습니다.

---

Observable로 작업하기 위해 Observable 배열이 데이터로 구성된 경우 일반적으로 표시하는 작업입니다.

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

---

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

---

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

ngif 템플릿

앵귤러 4

---

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 및 비동기 파이프로 관찰 가능

상세 사항은

---

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

---

HTML 태그 또는 템플릿에서 if 조건을 사용할 수있는 두 가지 가능성이 있습니다.

1. * ngIf 지시문이 CommonModule의 HTML 태그에 있습니다.
2. 다른 경우라면

---

대한 코너 (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>

---

<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font">    </div>

<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>

---

Javascript 짧은 삼항 조건 연산자를 사용할 수도 있습니다. 이 같은 각도로 :

{{doThis() ? 'foo' : 'bar'}}

또는

<div [ngClass]="doThis() ? 'foo' : 'bar'">

---

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

출처 :

1. https://angular.io/api/common/NgIf#syntax
2. https://angular.io/guide/template-syntax#template-reference-variables--var-

---

나는 이것이 오래되었다는 것을 알고 있지만 도움이된다면 추가하고 싶습니다. 내가했던 방법은 구성 요소에 두 개의 플래그를 가지고 해당하는 두 플래그에 대해 두 개의 ngIfs를 갖는 것입니다.

템플릿과 재료가 잘 작동하지 않았기 때문에 간단하고 재료와 잘 작동했습니다.

---

앵귤러 8

<div *ngIf="condition; else elseBlock"> when condition is true.</div>
<ng-template #elseBlock> when condition is false.</ng-template>

참고 URL : https://stackoverflow.com/questions/43006550/how-to-use-ngif-else