角度の2つのスイッチケース値

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ソースコードを見ると、これはかなり「ばかげている」です。これ===は、ケース値とスイッチ値の中間にすぎません。2つの選択肢がありますが、どちらも素晴らしいとは言えません。

オプション1はディレクティブを使用して*ngSwitchDefaultいますが、これは複数のケースがすべてFORM1の場合にのみ機能します。

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

非常に冗長なもう1つのオプションは、次のようなことです。

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

更新

Angularはまだそのような機能を検討していますが、jonrimmerのswitch-cases.directive.tsがあります。使用例：

<ng-container [ngSwitch]="variable">
    <ng-container *jrSwitchCases="[1, 2]">FORM 1</ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
</ng-container>

これは、Fabioの2番目の回答とbrian3kbの回答を組み合わせて、意味をわかりにくくすることなく、より凝縮されたソリューションを生成するバリエーションです。

ケースに複数の一致がある場合はarray.includes()、各オプションを個別に比較する代わりに使用します。

受け入れられた回答に比べてはるかに凝縮されるため、3つ以上の一致がある場合に特に役立ちます。

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

ただし、タイプミスに注意してください...