[英]bind image dynamically Angular 8
我有object array
,我需要根据信用卡类型动态添加图像图标,
ts文件
icon: any;
savedCreditCard =
[
{
cardExpiryDateFormat: "05/xx",
cardNumberLast: "00xx",
cardId: "xxx",
cardType: "Mastercard",
cardExpiryDate: "xx05",
paymentChannelId: 9,
cardNumberMasked: "512345XXXXXXXXXX"
},
{
cardExpiryDateFormat: "11/xx",
cardNumberLast: "58xx",
cardId: "xxx",
cardType: "Amex",
cardExpiryDate: "xx11",
paymentChannelId: 16,
cardNumberMasked: "379185XXXXXXXXX"
}
]
ngOnInit() {
this.savedCreditCard.forEach((x => {
if (x.cardType === 'Mastercard') {
this.icon = '../../assets/svg/logo-mastercard.svg';
} else if (x.cardType === 'Amex') {
this.icon = '../../assets/svg/icon-amex.svg';
}
})
);
}
在 HTML 模板上,我尝试根据信用卡类型动态绑定图像,这是我尝试过的,
html文件
<div class="flex-float">
<div class="float-end">
<img class="select--icon" [src]="icon" />
<p class="selected--desc is-hidden-mobile-xs">
{{ selectedCard.cardType }}
</p>
</div>
</div>
问题是即使是万事达卡或美国运通卡,我也只有相同的图标,我想在 stackblitz 上重现,但它不支持 static 图像,有人知道如何解决这个问题或有什么建议吗?
只有一个icon
变量,并且在每次forEach()
迭代中都被重新分配了一个新的图标路径。 并且这个icon
用于所有卡片,因此只显示一张图像。
方法一:
你可以有一个 object 之类的图标
var icons = {
'Mastercard': '../../assets/svg/logo-mastercard.svg',
'Amex': '../../assets/svg/icon-amex.svg'
};
而在 HTML 中,只需根据卡类型使用适当的图标即可。
<div class="flex-float">
<div class="float-end">
<img class="select--icon" [src]="icons[selectedCard.cardType]" />
<p class="selected--desc is-hidden-mobile-xs">
{{ selectedCard.cardType }}
</p>
</div>
</div>
无需对ngOnInit()
中的saveCreditCard
数组进行任何更改。
方法二:
如果要在saveCreditCard
中的每个 object 上存储图标,则可以使用Array.map() 。
在ngOnInit()
中,为每张信用卡分配图标。
ngOnInit() {
this.savedCreditCard = this.savedCreditCard.map(card => {
let icon;
if (card.cardType === 'Mastercard') {
icon = '../../assets/svg/logo-mastercard.svg';
} else if (card.cardType === 'Amex') {
icon = '../../assets/svg/icon-amex.svg';
}
return {...card, "icon": icon};
});
}
然后在 HTML 中,使用卡片的icon
属性。
<div class="flex-float">
<div class="float-end">
<img class="select--icon" [src]="selectedCard.icon" />
<p class="selected--desc is-hidden-mobile-xs">
{{ selectedCard.cardType }}
</p>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.