使用 ngSwitch 专门更改 img [src]

Posted 2023-02-23

【中文标题】使用 ngSwitch 专门更改 img [src]

【英文标题】：Change img [src] specifically with ngSwitch

【发布时间】：2022-01-05 14:08:08

【问题描述】：

我想根据条件更改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> 

【参考方案1】：

我会创建一个管道，因此您只需编写一次代码，然后将其添加到任何 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 中创建的空模板代码。

【参考方案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 模板中的工作方式。

【参考方案3】：

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

 

【参考方案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 检查。

【参考方案5】：

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

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

【讨论】：

我真的不想让它参与到 ts 文件中

实际上，如果您特别想忽略创建多个 ngswtich 图像标签，我强烈建议在 ts 文件中执行此操作，该文件应保留大多数逻辑