使用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> 

- Qiimiia

Answer 1

我会创建一个管道，这样你只需编写一次代码，然后将其添加到任何HTML文件中，特别是如果你将在更多组件中使用此功能。此外，以后修改/扩展起来更容易，因为你只需要在一个地方进行修改。

我在这里留下了一个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;
  }
}

注意：我假设< strong>bank.bankName 是字符串而不是数组。如果不是字符串，则必须相应地更改管道。

如何创建管道？ 只需在您的控制台/ bash中键入此命令即可创建管道： < strong> ng g pipe pipes / bankNameImage < strong> ng 表示Angular CLI < strong> g 表示生成 < strong> pipes 表示要放置管道的文件夹 < strong> bankNameImage 表示管道名称（用于在HTML中使用管道的名称）

然后，您只需要使用我提供的代码填写此命令将在文件< strong> bank-name-image.pipe.ts 中创建的空模板代码即可。

- Juan Vicente Berzosa Tejero

Answer 2

我会尝试回答这个问题（而不是告诉你我会做什么）。不，你不能只使用ngSwitch而不重复整个img标签。每个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
这就是Angular模板中ngSwitch的工作原理。

- Enrique González

Answer 3

在HTML模板中，使用三元运算符链式编写代码并不是一个好的选择。如果你真的想避免使用switch语句，可以将这段代码写在component.ts文件中，并设置一个名为public imageSrc = ''的属性，计算结果并赋值。

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

- vaira

---

我不想让它涉及到ts文件。 - Qiimiia

实际上，我强烈建议在ts文件中完成大部分逻辑，如果您特别想忽略创建多个ngswtich图像标签。 - vaira

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 检查。

- Srikar Phani Kumar Marti

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;
}
 

- Mukul_Vashistha