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

В php и java мы можем сделать

case 1:
case 2:
   echo "something";

чтобы при значении 1 или 2 на экране было напечатано "что-то", я создаю приложение angular, я делаю что-то вроде ниже

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

Остерегайтесь опечаток ...