我有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上重现,但它不支持静态图像,任何人都知道如何解决此问题或任何建议吗?
只有一个icon
变量,并且在每个forEach()
迭代中都将为其重新分配一个新的图标路径。并且此icon
用于所有卡,因此仅显示一张图像。
方法1:
您可能有一个类似图标的对象
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>
无需在saveCreditCard
中对ngOnInit()
数组进行任何更改。
方法2:
如果要在saveCreditCard
中的每个对象上存储图标,则可以使用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>