Angular中如何将API返回的id与本地数组映射以在视图显示对应名称

以下提供两种常用的落地实现方案： #

方案1：组件内预处理数据（性能最优，推荐优先使用） #

该方案只对数据做一次转换计算，不会触发额外的重复运算，适合绝大多数场景：

1. 先将本地映射数组转成Map结构，提升查找效率，拿到接口返回的educations后统一做字段映射：

// 本地映射数组转Map
private institutionMap = new Map(this.Institutions.map(item => [item.id, item.name]));
private fieldMap = new Map(this.Fields.map(item => [item.id, item.name]));

// 接口拿到educations后执行该方法处理数据
processEducations() {
  this.educations = this.educations.map(edu => {
    // 注意接口返回的id为字符串类型，转数字匹配本地id
    const institutionId = Number(edu.institution_id);
    const fieldId = Number(edu.field_id);
    return {
      ...edu,
      // 匹配不到时返回默认兜底文案
      institution_name: this.institutionMap.get(institutionId) || '未知院校',
      field_name: this.fieldMap.get(fieldId) || '未知专业'
    }
  })
}

2. 模板直接调用映射后的字段即可：

<div *ngFor="let education of educations">
  <div class="col-2">
    <p>{{education.institution_name}}</p>
    <p>{{education.field_name}}</p>
  </div>
</div>

方案2：封装纯管道（复用性高，适合多页面重复使用场景） #

如果多个业务模块都需要做该类id到名称的映射，可以封装Angular纯管道，仅当输入值变化时才会重新计算，性能稳定：

1. 封装院校名称映射管道

// institution-name.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
// 注入你存储本地映射数据的服务，示例名为LocalDataService
import { LocalDataService } from './local-data.service';

@Pipe({
  name: 'institutionName',
  pure: true // 纯管道默认开启，可省略
})
export class InstitutionNamePipe implements PipeTransform {
  constructor(private localDataService: LocalDataService) {}

  transform(id: string | number): string {
    const target = this.localDataService.Institutions.find(item => item.id === Number(id));
    return target ? target.name : '未知院校';
  }
}

2. 用同样逻辑封装专业名称映射管道

// field-name.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { LocalDataService } from './local-data.service';

@Pipe({
  name: 'fieldName'
})
export class FieldNamePipe implements PipeTransform {
  constructor(private localDataService: LocalDataService) {}

  transform(id: string | number): string {
    const target = this.localDataService.Fields.find(item => item.id === Number(id));
    return target ? target.name : '未知专业';
  }
}

3. 将两个管道加入对应模块的declarations声明数组后，即可在模板中直接使用：

<div *ngFor="let education of educations">
  <div class="col-2">
    <p>{{education.institution_id | institutionName}}</p>
    <p>{{education.field_id | fieldName}}</p>
  </div>
</div>

注意：不推荐直接在模板中调用查找方法（比如{{getInstitutionName(education.institution_id)}}），Angular每次变更检测都会重复执行该方法，列表数据量较大时会出现明显性能损耗。

内容的提问来源于stack exchange，提问作者Ashad peal