각도로 표시된 두 개의 스위치 케이스 값

각도로 표시된 두 개의 스위치 케이스 값

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>

제 불행하게도 그것이 효과가 없었습니다, 누가 이것을 하는 더 나은 방법을 제안할 수 있을까요?

(언)다행히도 당신은 할 수 없습니다; 그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>

사용할 수 있습니다.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>

훨씬 더 유연한 다음을 사용할 수도 있습니다.그런 다음 부울 값으로 평가되는 모든 항목을 *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 블록을 사용할 때보다 이점은 기본값을 계속 지정할 수 있다는 것입니다.

다음은 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()조건부 3항 연산자의 사용을 방지합니다.

<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)"

이는 다음을 사용하여 달성할 수 있습니다.ngTemplateOutlet지시:

<ng-container [ngSwitch]="colour">
    <ng-container *ngSwitchCase="'green'">:)</ng-container>
    <ng-container *ngSwitchCase="'yellow'">;)</ng-container>
    <ng-container *ngSwitchCase="'black'" [ngTemplateOutlet]="sad"></ng-container>
    <ng-container *ngSwitchCase="'darkgrey'" [ngTemplateOutlet]="sad"></ng-container>
</ng-container>

<ng-template #sad>:(</ng-template>

사용하다ngFor:

<ng-container [ngSwitch]="column">
  <ng-container *ngFor="let numeric of ['case1', 'case2']">
    <ng-container *ngSwitchCase="numeric">
      {{ element[column] | currency }}
    </ng-container>
  </ng-container>
</ng-container>

다음과 같은 방법이 있습니다.

당신의.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>

오타를 조심하세요...

시도해 보십시오ng-switch-when-separator="|"안에ng-switch

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

파비오 안투네스의 두 번째 대답, 하지만 파이프로:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'multiSwitchCase',
})
export class MultiSwitchCasePipe implements PipeTransform {
  transform<T = any>(cases: T[], value: T): T {
    return cases.includes(value) ? value : cases[0];
  }
}

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

<ng-container *ngIf="['text', 'email', 'password', 'number'].includes(f.type!)">
    <mat-form-field>
         <mat-label>{{f.placeholder}}</mat-label>
         <input matInput [attr.type]="f.type" [formControlName]="f.name!">
   </mat-form-field>
</ng-container>

언급URL : https://stackoverflow.com/questions/40176061/two-switch-case-values-in-angular