Dois valores de caso de comutação em angular

Em php e java podemos fazer

case 1:
case 2:
   echo "something";

de modo que quando o valor for 1 ou 2 "alguma coisa" será impresso na tela, estou construindo um aplicativo angular, estou fazendo algo como o abaixo

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

O formulário que é usado para escolha única pode ser usado para escolha múltipla, mas eu tentei algo como abaixo para torná-lo mais organizável

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

Minha má sorte não funcionou, alguém pode sugerir a melhor maneira de fazer isso.

(In) felizmente você não pode; o ngSwitché bastante “burro” se você olhar para o código-fonte: é apenas um ===entre o valor de caso e o valor da chave. Você tem duas opções, mas ambas estão longe de ser excelentes.

A opção 1 está usando a diretiva *ngSwitchDefault, mas isso só funcionará se todos os seus vários casos forem FORM 1:

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

A outra opção, que é bastante prolixa, é fazer algo assim:

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

Você também pode usar o seguinte, que é muito mais flexível. Você pode então colocar qualquer coisa que seja avaliada como booleana como o valor * 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>

A vantagem disso em relação ao uso de blocos * ngIf é que você ainda pode especificar um padrão.

Você pode usar ngTemplateOutletpara implementar isso:

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

Como o MoshMage sugeriu, acabei usando um *ngIfpara lidar com isso para os componentes que lidavam com várias das opções:

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

Aqui está uma variação que combina a segunda resposta de Fábio com a de brian3kb para produzir uma solução mais condensada sem ofuscar o significado.

Se houver várias correspondências para um caso, ele usa em array.includes()vez de comparar cada opção individualmente.

É especialmente útil se houver mais de duas correspondências, pois será muito mais condensado em relação à resposta aceita.

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

Se as correspondências estiverem em uma variável, você pode usar array.indexOf()para evitar o uso do operador ternário condicional.

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

Por favor tente ng-switch-when-separator="|"emng-switch

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

É assim que eu faria:

Em seu .component.ts:

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

Então, em seu arquivo de modelo, você pode fazer algo assim:

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

Cuidado com erros de digitação ...