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

Question

所以我有一个 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 列出银行。但是，我还想 link 来自银行图像数组的图像，所以它看起来像这样。

<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

Answer 1

映射您的 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)

Answer 2

可以写方法通过id获取图片url，需要的时候在模板中调用。悬停或单击时。如果您需要在 table 中渲染图像，请使用 map() 方法。

Answer 3

运行 TS 中的循环比较两个数组并从那里创建一个新数组，您将通过 *ngFor

在模板上循环

Answer 4

您可以试试这个解决方案

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_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"
  }
]

getBankImage(bankname){
    let bankData=this.bank_images.find(data=>data.bankname==bankname);
    if(bankData){
      return bankData.image
    }
}

和html代码

<tr *ngFor="let item of banks">
      <td>{{item.name}}</td>
      <td>{{item.account_number}}</td>
      <td>{{getBankImage(item.bankname)}}</td> 
</tr>

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

Angular 5 listing ngFor while calling two linked object

typescript

ngfor

angular