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

답변

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 의 인라인 템플릿입니다 .

그렇지 않으면 템플릿이 바인딩되어 있지 않으면 비어 있습니다.

답변

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>

답변

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

자세한 사항은