动态绑定图像Angular 8答案

【问题标题】：bind image dynamically Angular 8动态绑定图像Angular 8
【发布时间】：2019-09-26 02:01:09
【问题描述】：

我有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 上重现，但它不支持静态图像，有人知道如何解决这个问题或有什么建议吗？

【问题讨论】：

标签： javascript arrays angular typescript

【解决方案1】：

只有一个icon 变量，并且在每次forEach() 迭代时都被重新分配一个新的图标路径。而这个icon 用于所有卡片，因此只显示一张图片。

方法一：

你可以有一个像这样的图标对象

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 数组进行任何更改。

方法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>

【讨论】：

你能解释更多关于方法 2，是的，它是工作
当然@jajanato。我们正在使用map() 方法将icon 属性添加到savedCreditCard 数组中的每个对象。查看 Array.map() 上的 MDN 文档以了解它是如何工作的。然后我们在显示所有卡片时使用这个图像路径作为 HTML 中的图标。我希望这会有所帮助。如果您有任何问题，请告诉我。
return {...card, "icon": icon}; 这段代码让我很困惑，为什么我们有......它可以像这样更简单return {..card, icon};