Angular의 if...else 문

Angular 응용 프로그램에서 if 문을 사용하는 방법을 소개하고 예제를 논의합니다.

Angular에서 if 문 사용

프로그래밍에서 if 문은 논리 블록입니다. 이러한 조건문은 특정 조건이 참 또는 거짓일 때 수행할 작업을 컴퓨터에 알려줍니다.

웹 애플리케이션의 현대 시대에 if 문은 조건에 따라 특정 코드 블록을 실행할 때 프로그래머의 삶을 이해하기 쉽게 만듭니다.

*ng-if 또는 예제에서 논의할 다른 간단한 방법을 사용하여 Angular에서 if 문을 사용할 수 있는 다양한 방법이 있습니다.

다음 명령을 사용하여 새 애플리케이션을 생성해 보겠습니다.

# angular
ng new my-app

Angular로 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

그런 다음 app.component.ts에서 statement 변수를 false로 설정합니다. 이 변수를 사용하여 코드를 실행합니다.

# angular
statement = false;

이제 app.component.html에서 statement 변수를 사용하여 변수를 true로 설정한 경우 명령문이 참이라는 내용을 표시하는 템플릿을 만듭니다.

변수를 false로 설정하면 명령문이 false임을 표시합니다.

# angular
<hello name="{{ name }}"></hello>
<h2>{{ statement ? 'This statement is True' : 'This statement is false' }}</h2>

statement 값을 변경할 때 작동하는지 확인하기 위해 애플리케이션을 테스트해 보겠습니다.

출력:

명령문의 값을 변경하고 true로 설정하고 작동 방식을 확인하십시오.

출력:

따라서 보시다시피 statement 변수의 값을 변경하면 코드가 실행되어 우리가 보고자 하는 값을 간단한 명령문 방식으로 보여줍니다.

if-else 문이 실행되는 div 내부에 표시하려는 블록을 상상해 봅시다. *ng-if 문을 사용하고 조건이 맞거나 틀릴 때 표시하려는 블록에 ID를 설정할 수 있습니다.

새로운 변수 element를 1로 설정하겠습니다. app.component.ts의 코드는 아래와 같습니다.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  statement = true;
  element = 1;
}

app.component.html에 템플릿을 만듭니다. trueBlock 블록을 표시하는 *ng-if 문이 있는 div가 있고 element 값이 1이 아닌 경우 ID가 falseBlock인 블록이 표시됩니다.

<div *ngIf="element == 1; then trueBlock; else falseBlock"></div>

<ng-template #trueBlock><button>Login</button></ng-template>
<ng-template #falseBlock><button>Logout</button></ng-template>

어떻게 작동하는지 확인해 봅시다.

출력:

요소의 값을 변경하고 작동 방식을 확인하십시오.

# angular
element = 2;

출력:

위의 예에서 볼 수 있듯이 *ng-if 문을 사용하고 블록의 id를 호출하여 코드 블록을 쉽게 표시할 수 있습니다.