programing

"*ngIf If"를 사용하려면 어떻게 해야 합니까?

jooyons 2023. 5. 25. 21:57

"*ngIf If"를 사용하려면 어떻게 해야 합니까?

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>Angular의 자체 구현입니다.<template>MDN에 따른 태그:

HTML<template>요소는 페이지가 로드될 때 렌더링되지 않지만 이후 JavaScript를 사용하여 런타임 중에 인스턴스화될 수 있는 클라이언트 측 콘텐츠를 보유하기 위한 메커니즘입니다.

각도 4.x.x에서

ngIf를 네 가지 방법으로 사용하여 간단한 if-else 절차를 수행할 수 있습니다.

그냥 사용할 경우

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

If with Else 사용(templateName 참고)

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

<ng-template #templateName>
    If isValid is false
</ng-template>

If with Then 사용(templateName 참고)

<div *ngIf="isValid; then templateName">
    Here is never showing
</div>

<ng-template #templateName>
    If isValid is true
</ng-template>

If with Then 및 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는 표현식을 평가한 다음 표현식이 각각 참 또는 거짓일 때 템플릿을 해당 위치에 렌더링합니다.

일반적으로 다음과 같습니다.

템플릿은 다른 값에 바인딩되지 않는 한 ngIf의 인라인 템플릿입니다.

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

Angular 9/8용

소스 링크 예제 포함

    export class AppComponent {
      isDone = true;
    }

*ngIf

    <div *ngIf="isDone">
      It's Done!
    </div>

    <!-- Negation operator-->
    <div *ngIf="!isDone">
      It's Not Done!
    </div>

*ngIf 및 기타

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

*ngIf, Then and Else

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

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>

isShow가 참이면 첫 번째 줄이 실행되고, 그렇지 않으면 두 번째 줄이 실행됩니다. 그렇지 않으면 BlockShow가 참조 변수로 작동하기 때문입니다.

<div *ngIf="isShow; else elseBlockShow">
  Text to show for If
</div>
<ng-template #elseBlockShow>
  Text to show for else block
</ng-template>

이것은 관측 가능한 배열이 데이터로 구성되어 있는 경우에 일반적으로 표시하는 작업입니다.

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

Angular의 NgIf에 대한 멋지고 깨끗한 구문과 다음을 사용합니다.else진술.간단히 말해서, 요소에 ElementRef를 선언한 다음 다음에 해당 요소를 참조합니다.else블록:

<div *ngIf="isLoggedIn; else loggedOut">
   Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

저는 NgIf, Else, Then에서 이 예를 들었는데, 제가 정말 잘 설명되어 있다는 것을 알게 되었습니다.

또한 다음을 사용하는 방법을 시연합니다.<ng-template>구문:

<ng-template [ngIf]="isLoggedIn" [ngIfElse]="loggedOut">
  <div>
    Welcome back, friend.
  </div>
</ng-template>

<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

그리고 또한 사용합니다.<ng-container>그게 당신이 원하는 거라면:

<ng-container
  *ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>

<ng-template #loggedIn>
  <div>
    Welcome back, friend.
  </div>
</ng-template>
<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

소스는 Angular의 NgIf 및 Else 구문에서 가져온 것입니다.

사용할 수 있습니다.<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 데모는 다음과 같습니다.

라이브 데모

"bindEmail"은 전자 메일 사용 가능 여부를 확인합니다.전자 메일이 있으면 로그아웃이 표시됩니다.그렇지 않으면 Login(로그인)이 표시됩니다.

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

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

다른 예:

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->

ngif 템플릿

ngif 각도 4

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

*ngCommonModule의 지시사항인 경우 HTML 태그;
if-builled

ng-template

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


<ng-template #template2> 
        ...
</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 및 비동기 파이프로 관찰 가능

자세한 내용은

단축 연산자인 자바스크립트 3차 조건 연산자를 .?각도는 다음과 같습니다.

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

또는

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

**ngIf else**

<div *ngIf="isConditionTrue;else other_condition">
    your content here
</div>

<ng-template #other_condition>other content here...</ng-template>

**ngIf then else**

<div *ngIf="isConditionTrue;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>


**ngIf then**

<div *ngIf="isConditionTrue;then content"></div>
<ng-template #content>content here...</ng-template>

4 에 4.0 서if..else구문은 Java의 조건 연산자와 매우 유사합니다.

에서 당신은 를 합니다."condition?stmnt1:stmnt2".

4에서는 Angular 4.0을 합니다.*ngIf="condition;then stmnt1 else stmnt2".

<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</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>

각도 4, 5 및 6에서

템플릿 참조 변수를 만들고 *ngIf 지시어 내의 다른 조건에 연결하면 됩니다.

사용 가능한 구문은 다음과 같습니다.

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

출처:

NgIf - 지시문
템플릿 구문

따라서, 이것은 실제로 ng-if를 사용하지는 않지만 많은 제안들이 조건문에서 텍스트를 쓰는 것을 다루는 것으로 보입니다.코드나 복잡성을 최소화하는 가장 좋은 방법은 이 방법이라고 생각합니다.당신이 판단하세요.

<div>{{variable == null ? 'Testing1' : 'Testing2'}}<div>
OR
<div>{{variable == null ? var1 : var2 }}<div>

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

<ng-template #templateName>
  If isValid is false
</ng-template>

제가 사용한 방법은 구성 요소에 두 개의 플래그와 해당 두 개의 플래그에 대해 두 개의 ngIf를 갖는 것입니다.

이것은 단순하고 재료는 ng-template와 재료가 잘 맞지 않아 잘 작동했습니다.

언급URL : https://stackoverflow.com/questions/43006550/how-can-i-use-ngif-else

'programing' 카테고리의 다른 글

.NET 표준과 .NET 코어 비교 (0)	2023.05.25
Node.js에서 npm 모듈을 제거하려면 어떻게 해야 합니까? (0)	2023.05.25
목표-C에서 클래스에 대한 개인 메서드를 정의하는 가장 좋은 방법 (0)	2023.05.25
쓰기-호스트와 쓰기-출력의 PowerShell 차이점은 무엇입니까? (0)	2023.05.25
장고에서 시간대를 설정하는 방법 (0)	2023.05.25

현재글"*ngIf If"를 사용하려면 어떻게 해야 합니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

sql-server, Python, json, CSS, Excel, jquery, C, spring-boot, git, WordPress, Android, angularjs, ajax, mysql, asp.net, ReactJS, angular, mongodb, MariaDB, Oracle,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

jooyon

"*ngIf If"를 사용하려면 어떻게 해야 합니까?

"*ngIf If"를 사용하려면 어떻게 해야 합니까?

ngIf/Else 구문

NgIf / Else / 명시적 구문 사용

NgIf 및 비동기 파이프로 관찰 가능

각도 4, 5 및 6에서

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

"*ngIf If"를 사용하려면 어떻게 해야 합니까?

"*ngIf If"를 사용하려면 어떻게 해야 합니까?

ngIf/Else 구문

NgIf / Else / 명시적 구문 사용

NgIf 및 비동기 파이프로 관찰 가능

각도 4, 5 및 6에서

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바