Two switch case values in angular

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

我的坏运气，它没有工作，可以有人建议更好的方式来做到这一点。

113105 次浏览
小开
最佳答案

(Un)幸运的是，您不能; 如果您查看源代码，就会发现 ngSwitch非常“笨”: 它只是 case 值和 switch 值之间的一个 ===。你有两个选择，但两个都不好。

选择1是使用指令 *ngSwitchDefault，但这将只有在所有您的多个情况是表格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>
小开

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

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

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

小开

这里有一个变体，结合法比奥的第二个答案与 brian3kb 的产生一个更浓缩的解决方案，没有混淆的意义。

如果有多个匹配的情况下，它使用 array.includes()，而不是比较每个选项单独。

It is especially useful if there are more than two matches as it will be much more condensed relative to the accepted answer.

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

您可以使用 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>

更新

虽然角度仍然是 考虑到这样的功能，有 jonrimmer 的 开关箱，指令。使用例子:

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

Please try ng-switch-when-separator="|" in 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>

小心打字错误。

小开

可以利用 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>
小开

使用 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>
小开 
<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>
小开

法比奥 · 安图内斯的第二个回答是:

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>

提交答案