能否向ngSwitch传入数组？无需外部foreach实现多case匹配

没问题！不过得先明确：原生的ngSwitch是排他性匹配逻辑——它只会渲染第一个与[ngSwitch]绑定值匹配的分支，没法直接同时触发多个case。但不用外层*ngFor也完全能达成你的需求，给你两种实用方案：

方案1：用多个*ngIf直接实现（简单高效） #

既然不想加循环，我们可以直接给每个内容块加判断：检查当前状态是否在statusIds数组里，默认分支则判断所有指定状态都不存在。代码长这样：

<div class="columnFormatting">
  <div *ngIf="statusIds.includes(2)"> Do 2 </div>
  <div *ngIf="statusIds.includes(4)"> Do 4 </div>
  <div *ngIf="!statusIds.some(id => [2,4].includes(id))"> Default </div>
</div>

这个方法完全不需要循环，逻辑清晰易懂。当statusIds=[2,4]时，"Do 2"和"Do 4"会同时显示，完美符合你的需求。

方案2：自定义多匹配开关指令（贴近原生ngSwitch语法） #

如果你更偏爱ngSwitch的语法结构，不想改成一堆*ngIf，可以自定义一个支持多值匹配的指令，语法和原生开关几乎一致，还能实现多分支同时渲染。

第一步：定义指令（简化版） #

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[multiSwitch]' })
export class MultiSwitchDirective {
  @Input() set multiSwitch(values: number[]) {
    this._values = values;
    this.updateViews();
  }
  private _values: number[] = [];
  private cases: Array<{ value: number; view: ViewContainerRef }> = [];
  private defaultView?: ViewContainerRef;

  addCase(value: number, template: TemplateRef<any>) {
    const view = this.viewContainer.createEmbeddedView(template);
    this.cases.push({ value, view });
    this.updateViews();
  }

  setDefault(template: TemplateRef<any>) {
    this.defaultView = this.viewContainer.createEmbeddedView(template);
    this.updateViews();
  }

  private updateViews() {
    // 显示所有匹配的分支
    this.cases.forEach(({ value, view }) => {
      view.clear();
      if (this._values.includes(value)) {
        this.viewContainer.createEmbeddedView(view.templateRef);
      }
    });
    // 处理默认分支：仅当无匹配时显示
    const hasMatch = this.cases.some(({ value }) => this._values.includes(value));
    if (this.defaultView) {
      this.defaultView.clear();
      if (!hasMatch) {
        this.viewContainer.createEmbeddedView(this.defaultView.templateRef);
      }
    }
  }

  constructor(private viewContainer: ViewContainerRef) {}
}

@Directive({ selector: '[multiSwitchCase]' })
export class MultiSwitchCaseDirective {
  @Input() set multiSwitchCase(value: number) {
    this.switchDirective.addCase(value, this.template);
  }

  constructor(
    private template: TemplateRef<any>,
    private switchDirective: MultiSwitchDirective
  ) {}
}

@Directive({ selector: '[multiSwitchDefault]' })
export class MultiSwitchDefaultDirective {
  constructor(
    private template: TemplateRef<any>,
    private switchDirective: MultiSwitchDirective
  ) {
    switchDirective.setDefault(template);
  }
}

第二步：在模板中使用 #

<div class="columnFormatting" [multiSwitch]="statusIds">
  <div *multiSwitchCase="2"> Do 2 </div>
  <div *multiSwitchCase="4"> Do 4 </div>
  <div *multiSwitchDefault> Default </div>
</div>

这个方案同样不需要外层循环，而且语法和原生ngSwitch高度相似，当statusIds=[2,4]时，两个匹配分支会同时渲染。

内容的提问来源于stack exchange，提问作者Andrew Fraser