Два значення корпусу комутатора в кутовому

У 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, але це буде працювати, лише якщо всі ваші кілька випадків мають ФОРМУ 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>

Ось варіант, який поєднує другу відповідь Фабіо з 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>

Остерігайтеся помилок, однак ...