[angular] 각도의 두 스위치 케이스 값

Program / 글쓴이

PHP와 Java에서 우리는 할 수 있습니다 

case 1:
case 2:
   echo "something";

값이 1 또는 2 일 때 “무언가”가 화면에 인쇄되도록 앵귤러 애플리케이션을 구축하고 있습니다. 다음과 같은 작업을하고 있습니다.

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="'multi-choice'">FORM 1</div>
  <div *ngSwitchCase="'singe-choice'">FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

단일 선택에 사용되는 형식은 여러 선택에 사용할 수 있지만 더 정리하기 위해 아래와 같이 시도했습니다. 

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="'multi-choice' || 'singe-choice'">FORM 1</div>
</div>

내 불운은 효과가 없었습니다. 누구나 더 나은 방법을 제안 할 수 있습니까?

답변

(Un) 불행히도 당신은 할 수 없습니다. 는 ngSwitch소스 코드를 보면 아주 “바보”입니다 : 그것은 단지의 ===경우 값과 스위치 값 사이. 두 가지 옵션이 있지만 둘 다 훌륭하지는 않습니다.

옵션 1은 지시문을 사용하고 *ngSwitchDefault있지만 여러 케이스가 모두 FORM 1 인 경우에만 작동합니다.

<div [ngSwitch]="data.type">
  <div *ngSwitchDefault>FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

매우 장황한 다른 옵션은 다음과 같은 작업을 수행하는 것입니다.

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="data.type === 'multi-choice' || data.type === 'singe-choice' ? data.type : '' ">FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

답변

훨씬 더 유연하게 다음을 사용할 수도 있습니다. 그런 다음 * ngSwitchCase 값으로 부울로 평가되는 모든 항목을 넣을 수 있습니다.

<div [ngSwitch]="true">
    <div *ngSwitchCase="data.type === 'multi-choice' || data.type === 'singe-choice'">FORM 1</div>
    <div *ngSwitchCase="data.type === 'range'">FORM 2</div>
    <div *ngSwitchDefault>FORM 3</div>
</div>

* ngIf 블록을 사용하는 것보다 이것이 갖는 장점은 여전히 ​​기본값을 지정할 수 있다는 것입니다.

답변

ngTemplateOutlet이를 구현 하는 데 사용할 수 있습니다 .

<ng-container [ngSwitch]="variable">
    <ng-container *ngSwitchCase="1">
        <ng-container *ngTemplateOutlet="form1"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="2">
        <ng-container *ngTemplateOutlet="form1"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
    <ng-template #form1>FORM 1</ng-template>
</ng-container>

최신 정보

Angular는 여전히 이러한 기능을 고려하고 있지만 jonrimmer의 switch-cases.directive.ts가 있습니다. 사용 예 :

<ng-container [ngSwitch]="variable">
    <ng-container *jrSwitchCases="[1, 2]">FORM 1</ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
</ng-container>

답변

다음은 Fabio의 두 번째 답변과 brian3kb를 결합하여 의미를 난독 화하지 않고보다 압축 된 솔루션을 생성하는 변형입니다.

케이스에 대해 여러 일치가있는 경우 array.includes()각 옵션을 개별적으로 비교 하는 대신 사용 합니다.

허용되는 답변에 비해 훨씬 더 압축되므로 일치하는 항목이 두 개 이상인 경우 특히 유용합니다.

<div [ngSwitch]="data.type">
   <div *ngSwitchCase="['multi-choice', 'singe-choice'].includes(data.type) ? data.type : ''">FORM 1</div>
   <div *ngSwitchCase="'range'">FORM 2</div>
   <div *ngSwitchDefault>FORM 3</div>
</div>

일치 항목이 변수에있는 array.indexOf()경우을 사용하여 조건부 삼항 연산자를 사용하지 않도록 할 수 있습니다 .

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="matches[matches.indexOf(data.type)]">FORM 1</div>
  <!-- ... -->
</div>

답변

MoshMage가 제안한 것처럼 *ngIf몇 가지 옵션을 처리하는 구성 요소에 대해이를 처리하기 위해를 사용하게 되었습니다.

 *ngIf="['Transformation', 'Field Mapping', 'Filter'].includes(selectedWorkflow.type)"

답변

시도하십시오 ng-switch-when-separator="|"에ng-switch

<div ng-switch="temp">
    <div ng-switch-when="1|2" ng-switch-when-separator="|"> echo "something"</div>
</div>

답변

방법은 다음과 같습니다.

귀하의 .component.ts:

getFormType(type: string) {
  switch(type) {
    case 'singe-choice':
    case 'multi-choice':
      return 'singe-choice|multi-choice'
    default:
      return type;
  }
}

그런 다음 템플릿 파일에서 다음과 같이 할 수 있습니다.

<div [ngSwitch]="getFormType(data.type)">
   <div *ngSwitchCase="'singe-choice|multi-choice'">FORM 1</div>
   <div *ngSwitchCase="'range'">FORM 2</div>
   <div *ngSwitchDefault>FORM 3</div>
</div>

하지만 오타를 조심하세요 …