angular - 使用 ngSwitch 专门更改 img [src]

Question

我想根据条件更改img 标签src。我现在正在使用三元运算符；我想问有没有一种方法可以使用 ngSwitch 代替(无需重复 img 标签)。这是我的代码:

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

Answer 1

我会创建一个管道，这样您只需编写一次代码，然后就可以将它添加到任何 HTML 文件中，尤其是当您要在更多组件中使用此功能时。而且，以后修改/扩展也更容易，因为你只需要修改一个地方。

我离开 HERE一个带有代码的 stackblitz，但它就像这样:

A) 在任何 HTML 文件中使用它(只需添加 | bankNameImagePipe):

<img height='26' width='22' [src]="bank.bankName | bankNameImagePipe" />

B) 管道文件:

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

@Pipe({
  name: 'bankNameImagePipe',
})
export class BankNameImagePipe implements PipeTransform {

  transform(value: string): string {

    let urlBankImg: string = 'assets/images/';

    switch (value) {
      case 'a':
        urlBankImg+= 'a.png';
        break;
      case 'b':
        urlBankImg+= 'b.png';
        break;
      case 'c':
        urlBankImg+= 'c.png';
        break;
      case 'd':
        urlBanckImg+= 'd.png';
        break;

      default:
        urlBankImg= 'default.png'; // You can add a 'default' image url here
        break;
    }

    return urlBankImg;
  }
}

注意:我假设 bank.bankName 是一个字符串而不是数组。如果不是字符串，则必须适当更改管道。

如何创建管道？您只需在 console/bash 中键入此命令即可创建管道:

ng g pipe pipes/bankNameImage

ng 表示 Angular CLIg 表示生成pipes 表示您希望管道所在的文件夹bankNameImage 表示管道名称(用于在 HTML 中使用管道的名称)

然后，您只需使用我上面提供的代码填充此命令将在文件 bank-name-image.pipe.ts 中创建的空模板代码。