여러 조건이 있는 Angular의 Ng-If

1. AngularJS에서 ng-if 작업
2. AngularJS의 <ng-template>
3. 여러 조건에서 ngIf 사용
4. *ngIf를 사용하여 동일한 문자열 비교

ngIf 지시문은 HTML 콘텐츠를 동적으로 표시하고 숨길 수 있는 AngularJS(https://angular.io/features)의 강력한 도구입니다. 또한 표현을 기반으로 콘텐츠를 표시하거나 숨길 수 있습니다. ng-if 지시문의 문이 TRUE 부울 값으로 평가되면 요소가 HTML 보기에 삽입됩니다. 그렇지 않으면 DOM에서 완전히 삭제됩니다. 이 기사에서는 여러 조건이 있는 AngularJS ng-if에 대해 설명합니다.

통사론:

<element ng-if="expression"**>
</element>**

AngularJS에서 ng-if 작업

AngularJS 프레임워크에서 제공하는 모든 내장 지시문은 항상 AngularJS 프레임워크에서 ng 접두사로 지정된다는 점을 이해하는 것이 중요합니다. ng-if 지시문은 True 또는 False와 같은 부울 값으로 평가되며 이 값에 따라 요소가 HTML DOM에 표시됩니다.

ng-if 표현식 평가가 False 값을 반환하면 요소가 DOM에서 삭제됩니다. 염두에 두어야 할 또 다른 사항은 ngIf로 HTML 요소를 제거하면 해당 범위가 소멸되고 해당 요소가 뷰에 다시 삽입되면 새 범위가 설정된다는 것입니다.

여기서 깊이 들어가기 전에 ng-if와 ng-show Angular 지시자의 차이점을 이해해야 합니다.

ng-if 지시어의 표현식 평가가 FALSE이면 요소가 DOM에서 제거됩니다. 그러나 ng-show 지시어의 표현식 평가가 FALSE이면 요소가 제거되는 대신 DOM에서 숨겨지며 이는 숨김 표시의 CSS 속성을 사용하여 수행됩니다.

예시

PHP 배경 지식이 있는 경우 아래와 같이 HTML 템플릿에 if-else 블록을 직접 작성할 수 있습니다.

if(display){
  <div>I am here</div>
}

else{
  <div>
   I am not here
  </div>
 }

그러나 HTML 파일에는 마크업 요소만 포함되어야 하기 때문에 if-else 블록을 작성하기 위해 HTML에서 대괄호를 사용할 수 없습니다. 이상적인 솔루션은 if else 조건 블록을 무언가로 대체하는 것입니다.

AngularJS의 <ng-template>

기본 지시문 ngIf 이전에 별표(*)를 고려한 적이 있습니까? *ngif 지시문에서 HTML 요소를 사용할 때 angular는 제공된 조건으로 <ng-template> 태그에서 해당 요소를 래핑합니다. ng-template에 대해 자세히 알아보려면 여기를 클릭하세요.

<ng-template [ngIf]="display">

  <div>I am Playing</div>

</ng-template> 

Angular 프레임워크에서 <ng-template>은 최종 HTML 출력에 포함되지 않는 의사 요소입니다. <ng-template> 내의 요소만 삽입됩니다. 요소에 id 또는 클래스와 같은 특성이 있으면 사용하십시오. 이러한 요소는 <ng-template> 내의 <div> 요소에 추가됩니다.

<div *ngIf="display" class="information" id="info">
  I am Playing
</div> 
 
 <ng-template [ngIf]="display">
    <div class="information" id="info">
      I am Playing
    </div>
 </ng-template>

여러 조건에서 ngIf 사용

AngularJS ng-if의 다음 조건에 대해 논의해 보겠습니다.

첫 번째는 AND 조건, 두 번째는 OR 조건, 세 번째는 NOT 조건입니다.

*ngIf의 AND 조건(&&)

*ngIf 문의 신뢰성을 결정하기 위해 논리 연산자 AND(&&)와 함께 다양한 조건을 사용할 수 있습니다. 모든 조건이 충족되면 요소가 DOM에 추가됩니다. 다음 예제는 AngularJS가 AND 조건을 평가하는 방법을 보여줍니다.

<div *ngIf="isCar && isBike">

 <span>{{Name}}</span>

</div>

*ngIf의 OR 조건(||)

조건 중 하나만 참이면 *ngIf를 사용하여 OR(||) 연산자를 사용하여 요소를 표시할 수 있습니다. 다음 코드 조각은 ngIf.에서 OR 조건의 사용을 보여줍니다.

 <div *ngIf="isCar || isBike">
   // Show Price comparison chart
 </div>

*ngIf(!)의 OR 조건

*ngIf 조건을 반대로 하려면 아래와 같이 NOT 연산자(!)를 사용할 수 있습니다.

<div *ngIf="!isCar">
	//Show the Prices of Bikes
</div>

*ngIf를 사용하여 동일한 문자열 비교

*ngIf 문 내에서 double equal(==) 또는 triple equal(===) 연산자를 적용하여 문자열의 동등성을 비교할 수 있습니다.

문자열을 동등하게 비교할 때 이중 등호 또는 삼중 등호를 사용하는 것을 잊거나 잘못 배치하기 쉽고 대신 할당 연산자(단일 등호)를 사용합니다.

*ngIf 내에서 할당 연산자를 사용하면 아래와 같이 Parser Error: Bindings cannot contain assignments at column 오류가 발생합니다.

<div *ngIf="Items.type = 'Cosmetics'">
// Show the Cosmetics items
</div>

*ngIf 내부의 정적 문자열을 비교할 때는 따옴표를 사용해야 합니다. 구성 요소 문자열 변수를 비교할 때 따옴표를 사용할 필요가 없습니다.