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

<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编写获取图像网址的方法，并在需要时调用模板。悬停或点击时。如果你需要在表格中渲染图像，那么使用map（）aproach。

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同时调用两个链接对象

4 个答案: