时间戳

首页 > 解决方案 > Angular 5在调用两个链接对象时列出ngFor

angular - Angular 5在调用两个链接对象时列出ngFor

问题描述

所以我有一个banks看起来像这样的数组：

[{id: 17, bankname: "A", account_number: "0609849432", branch: "",…},
{id: 114, bankname: "B", account_number: "1231241414", branch: null,…},
{id: 142, bankname: "A", account_number: "34234234", branch: null,…}]

我也有一个bank_image这样的数组：

[{id: 4, bankname: "A", image: "www.foo.bar/imageA.jpg",…},
{id: 7, bankname: "B", image: "www.foo.bar/imageB.jpg",…},
{id: 14, bankname: "C", image: "www.foo.bar/imageC.jpg",…}]

对于视图，我使用ngFor列出银行。但是，我也想链接银行图像数组中的图像，所以它看起来像这样。

<tr *ngFor="let item of banks">
      <td>{{item.name}}</td>
      <td>{{item.account_number}}</td>
      <td>{{item.image}}</td>                 //how do I link the image?
</tr>

bank_image.name在==中获取图像的正确方法是什么banks.name？

期望的输出：

A    0609849432       www.foo.bar/imageA.jpg
B    1231241414       www.foo.bar/imageB.jpg
A    34234234         www.foo.bar/imageA.jpg

标签： angulartypescriptngfor

解决方案

映射您的banks数组以创建一个具有您需要的所有属性的新数组，然后在 HTML 中使用新数组。

const banks = [{
    id: 17,
    bankname: "A",
    account_number: "0609849432",
    branch: ""
  },
  {
    id: 114,
    bankname: "B",
    account_number: "1231241414",
    branch: null
  },
  {
    id: 142,
    bankname: "A",
    account_number: "34234234",
    branch: null
  }
]

const bank_images = [{
    id: 4,
    bankname: "A",
    image: "www.foo.bar/imageA.jpg"
  },
  {
    id: 7,
    bankname: "B",
    image: "www.foo.bar/imageB.jpg"
  },
  {
    id: 14,
    bankname: "C",
    image: "www.foo.bar/imageC.jpg"
  }
]

const newArr = banks.map(x => {
  return {
    ...x,
    image: bank_images.find(y => y.bankname === x.bankname).image
  }
})

console.log(newArr)

推荐阅读