Angular 5中用ngFor遍历并关联两对象数组匹配银行图片

嘿，这个问题我熟！在Angular 5里要实现你说的遍历banks数组、依据bankname匹配bank_image里对应图片并展示的需求，有两种常用的方式，我给你详细讲讲：

方法一：模板内调用方法直接匹配 #

这种方式简单直接，适合数据量不大的场景。我们可以在组件里写一个辅助方法，根据bankname从bank_image数组里找出对应的图片地址，然后在模板的*ngFor循环里调用这个方法。

组件代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-bank-list',
  templateUrl: './bank-list.component.html'
})
export class BankListComponent {
  // 你的banks数组
  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数组
  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"}
  ];

  // 根据bankname获取对应的图片地址
  getBankImage(bankname: string): string {
    const matchedImage = this.bank_image.find(img => img.bankname === bankname);
    // 没有匹配到的话返回空字符串，也可以换成你的默认图片地址
    return matchedImage ? matchedImage.image : '';
  }
}

模板代码 #

<!-- 遍历banks数组，调用方法获取图片 -->
<div *ngFor="let bank of banks">
  {{ bank.bankname }} {{ bank.account_number }} {{ getBankImage(bank.bankname) }}
</div>

⚠️ 注意：这种方式每次Angular触发变更检测时都会调用getBankImage方法，如果你的数组规模很大，可能会有性能损耗。

方法二：组件内预处理合并数据（推荐） #

为了避免重复查找的性能问题，更推荐在组件初始化时就把banks和bank_image的数据合并好，生成一个包含图片地址的新数组，之后模板直接遍历这个新数组即可。

组件代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bank-list',
  templateUrl: './bank-list.component.html'
})
export class BankListComponent implements OnInit {
  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"}
  ];

  // 合并后的数组，包含银行信息和对应图片
  banksWithImages: Array<any>;

  ngOnInit(): void {
    // 先把bank_image转成键值对（key: bankname, value: image），提升查找效率
    const bankImageMap = this.bank_image.reduce((map, imgItem) => {
      map[imgItem.bankname] = imgItem.image;
      return map;
    }, {} as {[key: string]: string});

    // 遍历banks数组，合并图片信息
    this.banksWithImages = this.banks.map(bank => {
      return {
        ...bank, // 复制原银行信息
        image: bankImageMap[bank.bankname] || '' // 添加图片地址，无匹配则为空
      };
    });
  }
}

模板代码 #

<!-- 直接遍历预处理好的数组，无需额外方法调用 -->
<div *ngFor="let bank of banksWithImages">
  {{ bank.bankname }} {{ bank.account_number }} {{ bank.image }}
</div>

这种方式只在组件初始化时做一次数据合并，后续模板渲染完全不需要额外计算，性能更优，尤其是数据量较大或者需要频繁渲染的场景。如果你的bank_image数组会动态更新，记得在数据变化时重新执行合并逻辑（比如用ngOnChanges或者RxJS监听数据变化）。

内容的提问来源于stack exchange，提问作者Rizki Hadiaturrasyid