角度中的两个开关盒值

Question

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

我的运气不好，它没有工作，任何人都可以提出更好的方法来做到这一点。

Answer 1

（不）幸运的是你不能；如果查看源代码，ngSwitch 是相当“愚蠢”的：它只是 case 值和 switch 值之间的 ===。你有两个选择，但都不是很好。

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

Answer 2

你可以使用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 仍然有 considering 这样的功能，但还有 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>

Answer 3

您还可以使用以下内容，这更加灵活。然后，您可以将计算结果为布尔值的任何内容作为 *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 块相比，它的优点是您仍然可以指定默认值。

Answer 4

这是一个变体，将 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>

Answer 5

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

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

Answer 6

可以使用ngTemplateOutlet 指令来实现：

<ng-container [ngSwitch]="colour">
    <ng-container *ngSwitchCase="'green'">:)</ng-container>
    <ng-container *ngSwitchCase="'yellow'">;)</ng-container>
    <ng-container *ngSwitchCase="'black'" [ngTemplateOutlet]="sad"></ng-container>
    <ng-container *ngSwitchCase="'darkgrey'" [ngTemplateOutlet]="sad"></ng-container>
</ng-container>

<ng-template #sad>:(</ng-template>

Answer 7

我会这样做：

在你的.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>

注意错别字...

Answer 8

使用ngFor:

<ng-container [ngSwitch]="column">
  <ng-container *ngFor="let numeric of ['case1', 'case2']">
    <ng-container *ngSwitchCase="numeric">
      {{ element[column] | currency }}
    </ng-container>
  </ng-container>
</ng-container>

Answer 9

请在ng-switch 中尝试ng-switch-when-separator="|"

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

Answer 10

<ng-container *ngIf="['text', 'email', 'password', 'number'].includes(f.type!)">
    <mat-form-field>
         <mat-label>{{f.placeholder}}</mat-label>
         <input matInput [attr.type]="f.type" [formControlName]="f.name!">
   </mat-form-field>
</ng-container>

Answer 11

The Fabio Antunes's second answer，但带有管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'multiSwitchCase',
})
export class MultiSwitchCasePipe implements PipeTransform {
  transform<T = any>(cases: T[], value: T): T {
    return cases.includes(value) ? value : cases[0];
  }
}

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