[英]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.