[英]bind image dynamically Angular 8
I have object array
which I need to add image icon dynamically based on type of credit card,我有
object array
,我需要根据信用卡类型动态添加图像图标,
ts file 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';
}
})
);
}
and on HTML template, I try to binding image dynamically based on type of credit card, this is what I had tried,在 HTML 模板上,我尝试根据信用卡类型动态绑定图像,这是我尝试过的,
html file 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>
the problem is I only got same icon eventhough is mastercard or amex, I want to reproduce on stackblitz, but it not supported static image, anyone know how to solve this or any suggestion?问题是即使是万事达卡或美国运通卡,我也只有相同的图标,我想在 stackblitz 上重现,但它不支持 static 图像,有人知道如何解决这个问题或有什么建议吗?
There is just one icon
variable and it is being reassigned a new icon path on each forEach()
iteration.只有一个
icon
变量,并且在每次forEach()
迭代中都被重新分配了一个新的图标路径。 And this one icon
is used for all cards, therefore only one image is being displayed.并且这个
icon
用于所有卡片,因此只显示一张图像。
Approach 1:方法一:
You could have an object of icons like你可以有一个 object 之类的图标
var icons = {
'Mastercard': '../../assets/svg/logo-mastercard.svg',
'Amex': '../../assets/svg/icon-amex.svg'
};
And in HTML, just use the appropriate icon based on card type.而在 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>
No need to make any changes to saveCreditCard
array in ngOnInit()
.无需对
ngOnInit()
中的saveCreditCard
数组进行任何更改。
Approach 2:方法二:
If you want to store icon on each object in saveCreditCard
, then Array.map() can be used.如果要在
saveCreditCard
中的每个 object 上存储图标,则可以使用Array.map() 。
In ngOnInit()
, assign icon to each credit card.在
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};
});
}
Then in HTML, use the card's icon
property.然后在 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.