具体使用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文件中，尤其是如果您要在更多组件中使用此功能。此外，将来修改/扩展更容易，因为您只需要在一个地方进行修改。

我在这里留下了一个代码堆栈，但它可能只是这样的：

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将是一个字符串，而不是数组。如果不是字符串，则必须适当地更改管道。

如何创建管道？您只需要在控制台/bash中键入此命令即可创建管道：

ng g管道/bankName图像

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

然后，您只需要用我上面提供的代码填充该命令将在银行名称image.pipe.ts文件中创建的空模板代码。

Answer 2

我会试着回答这个问题(而不是告诉你我该怎么做(。不，如果不重复整个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模板中的工作方式。

Answer 3

在三元运算符链中编写代码从来都不是一个好办法，尤其是在HTML模板中。切换很好，如果你真的想避免它，你可以简单地在component.ts文件中写下这段代码，并设置一个名为peropty的public imageSrc = ''，计算结果并分配它

<div>
<img height='26' width='22' [src]="imageSrc" />
</div> 

Answer 4

您可以在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检查。

Answer 5

我个人建议在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;
}