如何使用ngSwitch切换img标签src属性且不重复img标签？

直接使用Angular原生ngSwitch语法无法实现「不重复编写img标签」的需求，因为ngSwitchCase需要绑定到要切换渲染的元素上，原生用法需要为每个分支编写独立的img标签。如果不想重复写img标签，有两种更优的实现方案：

方案1：将匹配逻辑抽到组件类中（最推荐） #

这种写法模板最简洁，后续维护修改也更方便，你只需要在对应的组件ts文件中新增一个匹配方法：

// 组件类代码
getBankIcon(bankName: string): string {
  // 这里用switch实现你要的分支逻辑，和你原来的三元效果完全一致
  switch(true) {
    case bankName.includes('a'): return 'assets/images/a.png';
    case bankName.includes('b'): return 'assets/images/b.png';
    case bankName.includes('c'): return 'assets/images/c.png';
    case bankName.includes('d'): return 'assets/images/d.png';
    default: return '';
  }
}

模板里直接调用方法即可，不需要重复写img标签：

<div>
  <img height='26' width='22' [src]="getBankIcon(bank.bankName)" />
</div>

方案2：模板内使用ngSwitch配合模板变量（不推荐，仅满足你要用ngSwitch的要求） #

如果你一定要在模板内使用ngSwitch语法，又不想重复写img标签，可以用ng-container存匹配结果到模板变量，再绑定到img的src上：

<div>
  <!-- 用ngSwitch做分支匹配，结果存到iconSrc模板变量 -->
  <ng-container [ngSwitch]="true">
    <ng-container *ngSwitchCase="bank.bankName.includes('a')">
      <ng-template #iconSrc>assets/images/a.png</ng-template>
    </ng-container>
    <ng-container *ngSwitchCase="bank.bankName.includes('b')">
      <ng-template #iconSrc>assets/images/b.png</ng-template>
    </ng-container>
    <ng-container *ngSwitchCase="bank.bankName.includes('c')">
      <ng-template #iconSrc>assets/images/c.png</ng-template>
    </ng-container>
    <ng-container *ngSwitchCase="bank.bankName.includes('d')">
      <ng-template #iconSrc>assets/images/d.png</ng-template>
    </ng-container>
    <ng-container *ngSwitchDefault>
      <ng-template #iconSrc></ng-template>
    </ng-container>
  </ng-container>
  <!-- 只写一次img标签，绑定上面匹配到的地址 -->
  <img height='26' width='22' [src]="iconSrc" />
</div>

附：原生ngSwitch的标准写法（需要重复写img标签） #

如果你可以接受重复写img标签，原生ngSwitch的实现如下：

<div [ngSwitch]="true">
  <img *ngSwitchCase="bank.bankName.includes('a')" height='26' width='22' src="assets/images/a.png" />
  <img *ngSwitchCase="bank.bankName.includes('b')" height='26' width='22' src="assets/images/b.png" />
  <img *ngSwitchCase="bank.bankName.includes('c')" height='26' width='22' src="assets/images/c.png" />
  <img *ngSwitchCase="bank.bankName.includes('d')" height='26' width='22' src="assets/images/d.png" />
  <img *ngSwitchDefault height='26' width='22' src="" />
</div>

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