如何动态更改图标？答案

【问题标题】：How to change the icon dynamically?如何动态更改图标？
【发布时间】：2020-04-20 13:18:04
【问题描述】：

我正在使用 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>

我做错了什么？

【问题讨论】：

标签： angular ionic-framework stripe-payments ionic4 font-awesome-5

【解决方案1】：

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

试试这样：

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

【讨论】：

这是正确答案。值得一提的是，Stripe 的卡片品牌枚举不会直接转换为 font-awesome，它们可能需要在传递给 fa-icon 之前进行一些调整（在服务器或前端）：fontawesome.com/icons?d=gallery&q=cc- 和 stripe.com/docs/api/payment_methods/…
谢谢。这行得通，但正如 ttmarek 所说，我需要在字符串前面添加一个 cc- ，如下所示：可以做这样的事情吗？
是的。试试'cc-' + transaction.source.brand
太棒了！完美运行。谢谢你。
欢迎。如果有帮助，请将答案标记为正确。