如何动态更改图标

Question

我正在使用Ionic Angular、Font Awesome和Stripe构建一个应用程序。我想根据从.ts页面中的服务器获得的值来更改HTML页面上的图标。

这就是我所拥有的：

<ion-item *ngFor="let transaction of myRecentTransactions">
<fa-icon [icon]="['fab', 'cc-visa']"></fa-icon><span>{{ transaction.source.last4 }}</span>
</ion-item>

这就是我想要的，但由于某种原因，它不起作用：

<ion-item *ngFor="let transaction of myRecentTransactions">
<fa-icon [icon]="['fab', '{{ transaction.source.brand }}']"></fa-icon><span>{{ transaction.source.last4 }}</span>
</ion-item>

我做错了什么？

Answer 1

在属性绑定中，直接使用transaction.source.brand，无需使用插值。

尝试如下：

<fa-icon [icon]="['fab',  'cc-' + transaction.source.brand ]"></fa-icon>