Zwei Schaltergehäusewerte im Winkel

In PHP und Java können wir tun

case 1:
case 2:
   echo "something";

Wenn der Wert 1 oder 2 ist, wird "etwas" auf dem Bildschirm gedruckt. Ich erstelle eine Winkelanwendung. Ich mache etwas wie das Folgende

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

Das Formular, das für die Einzelauswahl verwendet wird, kann für die Mehrfachauswahl verwendet werden, aber ich habe etwas wie das Folgende versucht, um es organisierbarer zu machen

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

Mein Pech, es hat nicht funktioniert, kann jemand den besseren Weg vorschlagen, dies zu tun.

(Un) zum Glück kannst du nicht; Das ngSwitchist ziemlich "dumm", wenn man sich den Quellcode ansieht: Es ist nur ein ===Wert zwischen dem Fallwert und dem Schaltwert. Sie haben zwei Möglichkeiten, aber beide sind alles andere als großartig.

Option 1 verwendet die Direktive *ngSwitchDefault, dies funktioniert jedoch nur, wenn alle Ihre Mehrfachfälle FORMULAR 1 sind:

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

Die andere Option, die ziemlich ausführlich ist, macht so etwas:

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

Sie können auch Folgendes verwenden, das viel flexibler ist. Sie können dann alles, was als boolescher Wert ausgewertet wird, als * ngSwitchCase-Wert festlegen.

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

Der Vorteil gegenüber der Verwendung von * ngIf-Blöcken besteht darin, dass Sie weiterhin einen Standard angeben können.

Sie können dies verwenden ngTemplateOutlet, um Folgendes zu implementieren:

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

Hier ist eine Variante, die Fabios zweite Antwort mit brian3kb kombiniert, um eine kondensiertere Lösung zu erhalten, ohne die Bedeutung zu verschleiern.

Wenn es für einen Fall mehrere Übereinstimmungen gibt, wird diese verwendet, array.includes()anstatt jede Option einzeln zu vergleichen.

Es ist besonders nützlich, wenn es mehr als zwei Übereinstimmungen gibt, da es im Vergleich zur akzeptierten Antwort viel komprimierter ist.

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

Wenn sich die Übereinstimmungen zufällig in einer Variablen befinden, können Sie array.indexOf()die Verwendung des bedingten ternären Operators vermeiden.

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

Wie von MoshMage vorgeschlagen, habe ich letztendlich ein verwendet *ngIf, um dies für die Komponenten zu handhaben, die mehrere der Optionen handhabten:

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

Bitte versuchen Sie es ng-switch-when-separator="|"inng-switch

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

So würde ich es machen:

In Ihrem .component.ts:

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

Dann können Sie in Ihrer Vorlagendatei Folgendes tun:

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

Achten Sie jedoch auf Tippfehler ...