Angular 2 ngSwitchCase，OR运算符不起作用。

Question

我有多个 switch 语句，但对于某些情况，我需要公共 case。因此，我尝试使用

或运算符 => ||

例如：

        <ng-container [ngSwitch]="options">
            <ng-container *ngSwitchCase="'a'">Code A</ng-container>
            <ng-container *ngSwitchCase="'b'">Code B</ng-container>
            <ng-container *ngSwitchCase="'c'">Code C</ng-container>
            <ng-container *ngSwitchCase="'d' || 'e' || 'f'">Common Code</ng-container>
            <ng-container *ngSwitchDefault>Code Default</ng-container>
        </ng-container>

输出：

if case = 'd' returns Common Code
else if case = 'e' and 'f' returns the Code Default 

这里的倒数第二种情况包含多种情况，现在默认情况下case 'd'仅适用于不适用于case 'e'和'f'。

我没有看到任何关于ngSwitchCase文档中的多个情况：

https://angular.io/docs/ts/latest/api/common/index/NgSwitchCase-directive.html https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html

Angular 2支持ngSwitchCase中的||运算符吗？

- PaladiN

Answer 1

如果你评估 'd' || 'e' || 'f'，结果是'd'，当 options 不是 'd' 时，它就不匹配。你不能这样使用 ngSwitchCase。

这样会起作用：

    <ng-container [ngSwitch]="true">
        <ng-container *ngSwitchCase="options === 'a'">Code A</ng-container>
        <ng-container *ngSwitchCase="options === 'b'">Code B</ng-container>
        <ng-container *ngSwitchCase="options === 'c'">Code C</ng-container>
        <ng-container *ngSwitchCase="options === 'd' || options === 'e' || options === 'f'">Common Code</ng-container>
        <ng-container *ngSwitchDefault>Code Default</ng-container>
    </ng-container>

- Günter Zöchbauer

---

哇！你是Angular神 :D 我没有想到[ngSwitch]应该有true条件。 ;) 感谢你提供的解决方法，我为此苦恼了几个小时。 - PaladiN

谢谢，不用谢。很高兴听到它解决了你的问题 :) - Günter Zöchbauer

可以了！关键点：[ngSwitch]="true" 将允许评估所有的 "SwitchCase condition" 标签。 - ObjectiveTC

在那种情况下，我认为最好使用 *ngIf 而不是修改 ngSwitch。这样可以写更少的代码，使代码更易读。 - Mihail

我原来也是这么想的，直到我意识到默认情况更加难以处理。 - Daniel Torres Laserna

Answer 2

我认为这种语法更好：

    <ng-container [ngSwitch]="options">
        <ng-container *ngSwitchCase="'a'">Code A</ng-container>
        <ng-container *ngSwitchCase="'b'">Code B</ng-container>
        <ng-container *ngSwitchCase="'c'">Code C</ng-container>
        <ng-container *ngSwitchCase="['d', 'e', 'f'].includes(options) ? options : !options">Common Code</ng-container>
        <ng-container *ngSwitchDefault>Code Default</ng-container>
    </ng-container>

- Bahador Raghibizadeh

---

非常好的解决方案。 - Experimenter

Answer 3

感谢Bahador R，帮助我创建了一个管道。

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

@Pipe({
    name: 'switchMultiCase'
})
export class SwitchMultiCasePipe implements PipeTransform {

    transform(cases: any[], switchOption: any): any {
        return cases.includes(switchOption) ? switchOption : !switchOption;
    }

}

使用方式

<ng-container [ngSwitch]="switchOption">
...
<div *ngSwitchCase="['somecase', 'anothercase'] | switchMultiCase:switchOption">

- RoB2022