Angular 2
ngif 사용 방법

소개

통사론

• <div * ngIf = "false"> 테스트 </ div> <! - false로 평가 ->
• <div * ngIf = "undefined"> 테스트 </ div> <! - false로 평가 ->
• <div * ngIf = "null"> 테스트 </ div> <! - false로 평가됩니다. ->
• <div * ngIf = "0"> 테스트 </ div> <! - false로 평가됩니다. ->
• <div * ngIf = "NaN"> 테스트 </ div> <! - false로 평가 ->
• <div * ngIf = ""> 테스트 </ div> <! - false로 평가됩니다. ->
• 다른 모든 값은 true로 평가됩니다.

로드 중 메시지 표시

구성 요소가 준비되지 않고 서버의 데이터를 기다리는 경우 * ngIf를 사용하여 로더를 추가 할 수 있습니다. 단계 :

먼저 boolean을 선언하십시오.

loading: boolean = false;

그런 다음 구성 요소에 ngOnInit 이라는 라이프 사이클 후크를 추가합니다.

ngOnInit() {
   this.loading = true;
}

그리고 서버로부터 완전한 데이터를 얻은 후에는 boolean을 false로 설정합니다.

 this.loading=false; 

html 템플릿에서 loading 속성과 함께 * ngIf를 사용하십시오.

<div *ngIf="loading" class="progress">
   <div class="progress-bar info" style="width: 125%;"></div>
</div>

조건에 경고 메시지 표시

<p class="alert alert-success" *ngIf="names.length > 2">Currently there are more than 2 names!</p>

* ngFor 루프의 시작 또는 끝에서 함수를 실행하려면 * ngIf 사용

NgFor는 지역 변수에 별명을 지정할 수있는 일부 값을 제공합니다.

• index - 0에서 시작하는 iterable에서 현재 항목의 (가변) 위치
• first - (boolean) 현재 항목이 iterable의 첫 번째 항목이면 true
• last - (boolean) 현재 항목이 iterable의 마지막 항목이면 true
• even - (boolean) 현재 색인이 짝수이면 true
• odd - (boolean) 현재의 인덱스가 홀수 인 경우는 true

<div *ngFor="let note of csvdata; let i=index; let lastcall=last">
      <h3>{{i}}</h3> <-- to show index position
      <h3>{{note}}</h3>
      <span *ngIf="lastcall">{{anyfunction()}} </span><-- this lastcall boolean value will be true only if this is last in loop
      // anyfunction() will run at the end of loop same way we can do at start
    </div>

* ngIf를 * ngFor와 함께 사용하십시오.

당신이 사용할 수 없지만 *ngIf 와 *ngFor (그것은 것 런타임에 오류가 있습니다) 같은 사업부에 당신은 중첩 할 수 있습니다 *ngIf 에서 *ngFor 원하는 동작을 얻을 수 있습니다.

예 1 : 일반 구문

<div *ngFor="let item of items; let i = index">
  <div *ngIf="<your condition here>">

   <!-- Execute code here if statement true -->

  </div>
</div>

예제 2 : 인덱스가 짝수 인 요소 표시

<div *ngFor="let item of items; let i = index">
  <div *ngIf="i % 2 == 0">
    {{ item }}
  </div>
</div>

단점은 외부 div 요소를 추가해야한다는 것입니다.

그러나 div 요소를 * ngFor를 사용하여 반복해야하고 use * ngIf를 사용하여 요소를 제거해야하는지 여부를 확인하는 경우에도 div 추가하는 것이 좋지 않은 경우를 생각해보십시오. 이 경우 * ngFor에 template 태그를 사용할 수 있습니다.

<template ngFor let-item [ngForOf]="items">
    <div *ngIf="item.price > 100">
    </div>
</template>

추가 외부 div 추가하는이 방법은 필요하지 않으며 또한 <template> 요소가 DOM에 추가되지 않습니다. 위의 예제에서 DOM에 추가 된 요소는 iterated div 요소뿐입니다.

참고 : Angular v4에서 <template> 은 <ng-template> 을 위해 더 이상 사용되지 않으며 v5에서 제거됩니다. Angular v2.x에서 <template> 은 여전히 ​​유효합니다.