Crearía una tubería , de modo que escriba una vez el código y luego simplemente agréguelo a cualquier archivo HTML, especialmente si va a usar esta función en más componentes. Además, es más fácil modificar/ampliar en el futuro, ya que solo tiene que modificar en un lugar.

Dejo AQUÍ un stackblitz con el código, pero sería algo como esto:

A) Para usarlo en cualquier archivo HTML (solo agregue | bankNameImagePipe ):

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

B) Archivo de tubería:

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

NOTA: Supongo que bank.bankName será una cadena y no una matriz. Si no fuera una cuerda, tendrías que cambiar la tubería como corresponde.

¿CÓMO CREAR LA TUBERÍA? Solo necesita escribir este comando en su consola/bash para crear una tubería:

ng g pipe pipes/bankNameImage

ng significa Angular CLI g significa Generar tuberías significa la carpeta donde desea que esté la tubería bankNameImage significa el nombre de la tubería (el que se usará para usar la tubería en HTML)

Luego, solo tienes que llenar el código de plantilla vacío que habrá creado este comando en el archivo nombre-banco-imagen.pipe.ts con el código que proporcioné arriba.

Intentaré responder la pregunta (en lugar de decirte qué haría). No, no puede usar ngSwitch en su lugar sin repetir toda la etiqueta img. Cada ngSwitchCase mostrará/ocultará un elemento. Así es como funciona la sintaxis de ngSwitch:

https://angular.io/api/common/NgSwitchCase

Entonces, la sintaxis para su etiquetado con ngSwitch sería algo como:

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

He dejado un ejemplo crudo aquí:

https://stackblitz.com/edit/angular-ivy-lmfttq?file=src/app/hello.component.html

Así es como funciona ngSwitch en plantillas Angular.

Escribir código en una cadena de operadores ternarios nunca es realmente un buen movimiento, especialmente en plantillas HTML. El cambio está bien y si realmente desea evitarlo, simplemente puede escribir este código en el archivo componente.ts y configurar un public imageSrc = '' llamado peropty, calcular el resultado y asignarlo.

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