我想根据条件更改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>
【问题讨论】：
标签： angular switch-statement src conditional-operator ng-switch
我会创建一个管道，因此您只需编写一次代码，然后将其添加到任何 HTML 文件中，特别是如果您打算在更多组件中使用此功能。 此外，将来修改/扩展更容易，因为您只需在一个地方进行修改。
我给HERE 留下了一堆代码，但它会是这样的：
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 pipe/bankNameImage
ng 表示 Angular CLI g 表示生成 pipes 表示您希望管道所在的文件夹 bankNameImage 表示管道名称（用于在 HTML 中使用管道的名称）
然后，您只需使用我上面提供的代码填充此命令将在文件 bank-name-image.pipe.ts 中创建的空模板代码。
【讨论】：
我会尝试回答这个问题（而不是告诉你我会做什么）。不，您不能在不重复整个 img 标签的情况下使用 ngSwitch。每个 ngSwitchCase 都会显示/隐藏一个元素。这就是 ngSwitch 语法的工作原理：
https://angular.io/api/common/NgSwitchCase
因此，使用 ngSwitch 标记的语法类似于：
<ng-container [ngSwitch]="bank.bankName">
<img *ngSwitchCase="'a'" src="/assets/a.svg" />
<img *ngSwitchCase="'b'" src="/assets/b.svg" />
<img *ngSwitchCase="'c'" src="/assets/c.svg" />
<img *ngSwitchCase="'d'" src="/assets/d.svg" />
</ng-container>
我在这里留下了一个粗略的例子：
https://stackblitz.com/edit/angular-ivy-lmfttq?file=src/app/hello.component.html
这就是 ngSwitch 在 Angular 模板中的工作方式。
【讨论】：
我个人建议在你的 ts 文件中完成所有工作，而不是在 html 文件中堆积这么多条件。
html 文件：
<div>
<img height='26' width='22' [src]="getImage(bank.bankName)" />
</div>
ts 文件：
getImage(value){
let imagePath='assets/images/';
switch(value){
case (value.indexOf('a')!=-1): imagePath+= 'a.png';
break;
case (value.indexOf('b')!=-1): imagePath+= 'b.png';
break;
case (value.indexOf('c')!=-1): imagePath+= 'c.png';
break;
case (value.indexOf('d')!=-1): imagePath+= 'd.png';
break;
default: // can add default image as per your requirement
}
return imagePath;
}
【讨论】：
您可以像这样在 TS 文件中执行此操作：
不使用 HTML 的原因：这不是一个好习惯，而且一旦加载视图（HTML 页面），操作应该从 component.ts 文件呈现。不在 HTML 中
// In component.ts file, you can create a method which returns a string:
@Component({
selector: 'your-app-selector',
templateUrl: './your-app.component.html',
styleUrls: ['./your-app.component.scss']
})
export class YourComponent implements OnInit {
imagePath: string = '';
constructor(){}
ngOnInit(): void {
this.imagePath = this.returnImagePath(bank.bankName);
}
returnImagePath(bankName: string): string {
let pathOfImage: string = 'assets/images/';
switch (bankName) {
case bankName.includes('a'):
pathOfImage += 'a.png';
break;
case bankName.includes('b'):
pathOfImage += 'b.png';
break;
case bankName.includes('c'):
pathOfImage += 'c.png';
break;
case bankName.includes('d'):
pathOfImage += 'd.png';
break;
default:
pathOfImage += '';
break;
}
}
return pathOfImage;
}
// YOUR HTML WOULD TURN INTO THIS ONE LINER
<img height='26' width='22' [src]="imagePath" />
这样你可以避免管道，也可以避免不必要的 HTML 检查。
【讨论】：
在三元运算符链中编写代码从来都不是一个好的举措，尤其是在 HTML 模板中。
开关很好，如果你真的想避免它，你可以简单地在 component.ts 文件中编写这段代码并设置一个名为 peropty 的public imageSrc = ''，计算结果并分配它。
<div>
<img height='26' width='22' [src]="imageSrc" />
</div>
【讨论】：