Dwie wartości obudowy przełącznika pod kątem

W php i java możemy to zrobić

case 1:
case 2:
   echo "something";

więc gdy wartość to 1 lub 2 "coś" zostanie wydrukowane na ekranie, buduję aplikację kątową robię coś takiego jak poniżej

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

Formularz używany do pojedynczego wyboru może być używany do wielokrotnego wyboru, ale spróbowałem czegoś takiego jak poniżej, aby uczynić go bardziej zorganizowanym

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

Mój pech to nie zadziałało, czy ktoś może zasugerować lepszy sposób na zrobienie tego.

(Nie) na szczęście nie możesz; ngSwitchjest dość „głupi”, jeśli spojrzeć na kod źródłowy: to tylko ===między wartością a wartością przypadku przełącznika. Masz dwie opcje, ale obie nie są świetne.

Opcja 1 korzysta z dyrektywy *ngSwitchDefault, ale zadziała to tylko wtedy, gdy wszystkie Twoje wielokrotne sprawy to FORMULARZ 1:

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

Inna opcja, która jest dość rozwlekła, robi coś takiego:

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

Możesz także użyć poniższego, który jest o wiele bardziej elastyczny. Następnie możesz umieścić wszystko, co ma wartość logiczną, jako wartość * 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>

Zaletą tego rozwiązania w stosunku do bloków * ngIf jest to, że nadal można określić wartość domyślną.

Możesz użyć ngTemplateOutletdo zaimplementowania tego:

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

Oto odmiana, która łączy drugą odpowiedź Fabio z brian3kb, aby uzyskać bardziej skondensowane rozwiązanie bez zaciemniania znaczenia.

Jeśli istnieje wiele dopasowań dla sprawy, używa array.includes()zamiast porównywać każdą opcję indywidualnie.

Jest to szczególnie przydatne w przypadku więcej niż dwóch dopasowań, ponieważ będzie znacznie bardziej skondensowane w stosunku do zaakceptowanej odpowiedzi.

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

Jeśli dopasowania znajdują się w zmiennej, możesz użyć, array.indexOf()aby uniknąć stosowania warunkowego operatora trójskładnikowego.

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

Jak zasugerował MoshMage , ostatecznie użyłem programu *ngIfdo obsługi tego dla komponentów, które obsługiwały kilka opcji:

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

Spróbuj ng-switch-when-separator="|"wng-switch

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

Oto jak bym to zrobił:

W twoim .component.ts:

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

Następnie w pliku szablonu możesz zrobić coś takiego:

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

Uważaj jednak na literówki ...