Angular 2 ngSwitchCase，或运算符不工作

Posted 2023-02-25

【中文标题】Angular 2 ngSwitchCase，或运算符不工作

【英文标题】：Angular 2 ngSwitchCase, OR operator not working

【发布时间】：2017-10-02 05:09:27

【问题描述】：

我有多个 switch 语句，但在某些情况下我需要常见的情况。所以，我正在尝试

OR operator => ||

例子：

        <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 包含多个 case，现在默认情况下 case 'd' 仅适用于 case 'e' and '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 中的 || 运算符吗？

【参考方案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>

【讨论】：

哇！你是Angular God :D 我不认为[ngSwitch] 应该有真实的条件。 ;) 感谢您的出路。好几个小时我都在摸不着头脑。

谢谢，不客气。很高兴听到它解决了您的问题:)

有效！关键点：[ngSwitch]="true" 将允许评估所有“SwitchCase 条件”标签

我认为在这种情况下使用 *ngIf 比破解 ngSwitch 更好。更少的代码，更高的可读性

@Mihail 我也认为，直到我意识到默认情况下放置起来更加复杂

【参考方案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>

【讨论】：

非常好的解决方案

【参考方案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">