* ngIf else if in template

한 *ngIf명세서에 여러 케이스가있는 방법은 무엇입니까? 나는 갖는 뷰 또는 각도 1 사용 해요 if, else if그리고 else있지만, 단지가 각도 4 것 같다 true( if)와 false( else) 상태.

문서에 따르면 다음과 같은 작업 만 수행 할 수 있습니다.

  <ng-container *ngIf="foo === 1; then first else second"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

하지만 여러 조건 (같은)을 갖고 싶습니다.

  <ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

하지만 결국 ngSwitch해킹처럼 느껴지는 을 사용해야합니다 .

  <ng-container [ngSwitch]="true">
    <div *ngSwitchCase="foo === 1">First</div>
    <div *ngSwitchCase="bar === 2">Second</div>
    <div *ngSwitchDefault>Third</div>
  </ng-container>

또는 Angular 1 및 Vue에서 익숙한 많은 구문이 Angular 4에서 지원되지 않는 것처럼 보이므로 이와 같은 조건으로 코드를 구성하는 데 권장되는 방법은 무엇입니까?

또 다른 대안은 조건을 중첩하는 것입니다.

<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>

다음을 사용할 수 있습니다.

<ng-template [ngIf]="index == 1">First</ng-template>
<ng-template [ngIf]="index == 2">Second</ng-template>
<ng-template [ngIf]="index == 3">Third</ng-template>

ng-container 부분이 당신의 디자인에 중요하지 않다면 요.

여기 플런 커가 있습니다

이것이 가장 깨끗한 방법 인 것 같습니다.

if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

템플릿에서 :

<ng-container *ngIf="foo === 1; else elseif1">foo === 1</ng-container>
<ng-template #elseif1>
    <ng-container *ngIf="bar === 99; else elseif2">bar === 99</ng-container>
</ng-template>
<ng-template #elseif2>
    <ng-container *ngIf="foo === 2; else else1">foo === 2</ng-container>
</ng-template>
<ng-template #else1>else</ng-template>

공지는 것을 적절한처럼 작동 else if해야 문 조건이 다른 변수를 포함 (단 1 케이스는 한 번에 사실이다). 다른 답변 중 일부는 이러한 경우 제대로 작동하지 않습니다.

제쳐두고 : gosh angular, 정말 못생긴 else if템플릿 코드입니다 ...

상황에 따라 여러 가지 방법을 사용할 수 있습니다.

1. Variable이 특정 Number 또는 String으로 제한되는 경우 가장 좋은 방법은 ngSwitch 또는 ngIf를 사용하는 것입니다.

   <!-- foo = 3 -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="1">First Number</div>
       <div *ngSwitchCase="2">Second Number</div>
       <div *ngSwitchCase="3">Third Number</div>
       <div *ngSwitchDefault>Other Number</div>
   </div>
   
   <!-- foo = 3 -->
   <ng-template [ngIf]="foo === 1">First Number</ng-template>
   <ng-template [ngIf]="foo === 2">Second Number</ng-template>
   <ng-template [ngIf]="foo === 3">Third Number</ng-template>
   
   
   <!-- foo = 'David' -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="'Daniel'">Daniel String</div>
       <div *ngSwitchCase="'David'">David String</div>
       <div *ngSwitchCase="'Alex'">Alex String</div>
       <div *ngSwitchDefault>Other String</div>
   </div>
   
   <!-- foo = 'David' -->
   <ng-template [ngIf]="foo === 'Alex'">Alex String</ng-template>
   <ng-template [ngIf]="foo === 'David'">David String</ng-template>
   <ng-template [ngIf]="foo === 'Daniel'">Daniel String</ng-template>
   

2. 위 코드와 동적 코드가 다른 경우 적합하지 않은 경우 아래 코드를 사용할 수 있습니다.

   <!-- foo = 5 -->
   <ng-container *ngIf="foo >= 1 && foo <= 3; then t13"></ng-container>
   <ng-container *ngIf="foo >= 4 && foo <= 6; then t46"></ng-container>
   <ng-container *ngIf="foo >= 7; then t7"></ng-container>
   
   <!-- If Statement -->
   <ng-template #t13>
       Template for foo between 1 and 3
   </ng-template>
   <!-- If Else Statement -->
   <ng-template #t46>
       Template for foo between 4 and 6
   </ng-template>
   <!-- Else Statement -->
   <ng-template #t7>
       Template for foo greater than 7
   </ng-template>
   

참고 : 모든 형식을 선택할 수 있지만 모든 코드에는 고유 한 문제가 있습니다.

중첩 및 ngSwitch를 방지하기 위해 논리 연산자가 Javascript에서 작동하는 방식을 활용하는 다음과 같은 가능성도 있습니다.

<ng-container *ngIf="foo === 1; then first; else (foo === 2 && second) || (foo === 3 && third)"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

또는 삼항 연산자와 함께 조건부 체인을 사용할 수도 있습니다. if … else if … else if … else체인.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#Conditional_chains

<ng-container *ngIf="isFirst ? first: isSecond ? second : third"></ng-container>

<ng-template #first></ng-template>
<ng-template #second></ng-template>
<ng-template #third></ng-template>

나는이 앞치마를 더 좋아한다.

<ion-row *ngIf="cat === 1;else second"></ion-row>
<ng-template #second>
    <ion-row *ngIf="cat === 2;else third"></ion-row>
</ng-template>
<ng-template #third>

</ng-template>

Angular는 우리가 항상 사용하는 많은 구조적 지시문 인 ngIf, ngFor 및 ngSwitch에서 이미 내부적으로 ng-template을 사용하고 있습니다.

> Angular의 ng-template이란?

https://www.angularjswiki.com/angular/what-is-ng-template-in-angular/

복잡한 if / then / else 블록을 약간 더 깨끗한 switch 문으로 변환하는 데이 오래된 트릭을 사용할 수도 있습니다.

<div [ngSwitch]="true">
    <button (click)="foo=(++foo%3)+1">Switch!</button>

    <div *ngSwitchCase="foo === 1">one</div>
    <div *ngSwitchCase="foo === 2">two</div>
    <div *ngSwitchCase="foo === 3">three</div>
</div>