Angular 调用两个链接对象时的角度5

所以我有一个

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,…}]

[{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",…}]

我还有一个

bank\u图像

数组，如下所示：

[{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,…}]

[{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>

---

映射你的

banks

数组，创建一个包含所有需要属性的新数组，然后在HTML中使用新数组

const banks=[{
身份证号码：17，
银行名称：“A”，
账号：“0609849432”，
分行：“”
},
{
id:114，
银行名称：“B”，
账号：“1231241414”，
分支：空
},
{
id:142，
银行名称：“A”，
账号：“34234234”，
分支：空
}
]
const bank_图像=[{
id:4，
银行名称：“A”，
图片：“www.foo.bar/imageA.jpg”
},
{
id:7，
银行名称：“B”，
图片：“www.foo.bar/imageB.jpg”
},
{
身份证号码：14，
银行名称：“C”，
图片：“www.foo.bar/imageC.jpg”
}
]
const newArr=banks.map（x=>{
返回{
…x，
image:bank_images.find（y=>y.bankname===x.bankname）.image
}
})
console.log（newArr）

映射您的

banks

数组以创建一个包含所有所需属性的新数组，然后在HTML中使用新数组

const banks=[{
身份证号码：17，
银行名称：“A”，
账号：“0609849432”，
分行：“”
},
{
id:114，
银行名称：“B”，
账号：“1231241414”，
分支：空
},
{
id:142，
银行名称：“A”，
账号：“34234234”，
分支：空
}
]
const bank_图像=[{
id:4，
银行名称：“A”，
图片：“www.foo.bar/imageA.jpg”
},
{
id:7，
银行名称：“B”，
图片：“www.foo.bar/imageB.jpg”
},
{
身份证号码：14，
银行名称：“C”，
图片：“www.foo.bar/imageC.jpg”
}
]
const newArr=banks.map（x=>{
返回{
…x，
image:bank_images.find（y=>y.bankname===x.bankname）.image
}
})
log（newArr）

您可以编写方法来按id获取图像url，并在需要时调用模板。当鼠标悬停或单击时。如果需要在表中渲染图像，请使用map（）aproach

您可以编写方法，通过id获取图像url，并在需要时调用模板。当鼠标悬停或单击时。如果需要在表中渲染图像，请使用map（）aproach

在TS中运行一个循环比较两个数组并创建一个新数组，然后通过*ngFor

在模板上循环在TS中运行一个循环比较两个数组并创建一个新数组，然后通过*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_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>

{{item.name}
{{item.account{u number}
{{getBankImage（item.bankname）}

您可以尝试此解决方案

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>

{{item.name}
{{item.account{u number}
{{getBankImage（item.bankname）}