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

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

Моя неудача, это не сработало, может ли кто-нибудь предложить лучший способ сделать это.

Ответ 1

(Un) к счастью, вы не можете; 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>

Ответ 2

Вы также можете использовать следующее, что намного более гибко. Затем вы можете поместить все, что оценивается как boolean, как значение * 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, заключается в том, что вы все равно можете указать значение по умолчанию.

Ответ 3

Как и MoshMage, я закончил использование *ngIf для обработки этого для компонентов, которые обрабатывали несколько параметров:

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

Ответ 4

Вот вариант, который объединяет второй ответ Фабио с 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>

Ответ 5

Вы можете использовать ngTemplateOutlet для реализации этого

<ng-container [ngSwitch]="variable">
   <ng-container *ngSwitchCase="1">
      <ng-container *ngTemplateOutlet="firstAndSecond"></ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="2">
      <ng-container *ngTemplateOutlet="firstAndSecond"></ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="3">
      some html
   </ng-container>
   <ng-container *ngSwitchDefault>
      another html
   </ng-container>
   <ng-template #firstAndSecond>
      html
   </ng-template>
</ng-container>