两个开关盒角度值

在PHP和Java中，我们可以做

case 1:
case 2:
   echo "something";

这样当值是1或2时，“ something”将被打印在屏幕上，我正在构建一个角度应用程序，我正在执行以下操作

<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，但这仅在所有多种情况均为FORM 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>

就像MoshMage所建议的一样，我最终使用*ngIf来处理处理多个选项的组件：

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

这是将Fabio的第二个答案与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>

请尝试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>

小心错别字...