Angular 11中如何解析数组内Observable以完成ag-grid字段映射

针对rowData中存储id、需要调用接口解析为名称、且不想手动维护id-名称映射表的场景，有两类可直接落地的实现思路：

方案1：自定义单元格渲染器 + 内置缓存的请求服务（推荐，性能最优） #

这个方案完全不需要在业务层手动维护映射数组，把字段解析的逻辑下沉到单元格渲染层，全程不会触发整表重渲染：

• 先封装一个通用的名称解析服务，内部自动维护缓存逻辑，不需要业务代码介入：
  • 服务内部通过私有Map结构存储已经请求过的id与对应名称，重复读取已缓存的id时直接返回结果，不发起新请求
  • 实现并发请求去重：如果同一个id被多个单元格同时需要解析，服务内部会合并相同的请求，只发一次HTTP调用，等结果返回后所有用到该id的单元格同步更新
  • 对外暴露的方法分两类：同步读取缓存值的方法、无缓存时发起请求拉取的Observable方法
• 针对valueBefore、valueAfter两列，分别写实现了ICellRendererAngularComp接口的Angular自定义单元格组件：
  • 单元格初始化时先通过解析服务同步读取当前行存储的id对应的名称，拿到就直接渲染文本
  • 无缓存值时，订阅解析服务的拉取接口，拿到结果后更新单元格内显示的名称，在组件销毁阶段（ngOnDestroy）自动退订避免内存泄漏
• 在ag-grid的列配置里，把这两列的cellRenderer属性指定为对应的自定义单元格组件即可
• 对比批量改rowData的方案：ag-grid本身会对单元格DOM做复用，这种方式只有需要更新的单元格会重绘，不会触发整表的变更检测，性能表现更好。

方案2：RxJS操作符在数据流层自动完成解析（零渲染层自定义代码） #

如果不想写自定义渲染组件，也可以直接在获取rowData的Observable流里通过操作符自动完成解析，全程不需要手写映射维护逻辑：

• 正常获取原始rowData（即存储id的原始数组）的Observable流
• 链式用RxJS操作符做自动转换：
  1. 通过switchMap切入流处理阶段：先遍历原始rowData，把所有valueBefore、valueAfter字段的id收集起来做去重
  2. 用forkJoin并发调用所有去重后id对应的GET /name/{id}接口，拿到全量的id-名称返回结果
  3. 把接口返回的结果在操作符内部临时转换为Map结构（这个Map是流处理的临时变量，不是需要手动维护的长期映射表）
  4. 遍历原始rowData数组，将每条数据里的id替换为Map中对应的名称，把处理完成的数组作为流的新值向后传递，直接绑定到ag-grid的rowData属性上
• 这个方案同样可以对接前面提到的带缓存的解析服务，对已经请求过的id跳过重复调用，减少网络开销。

常见踩坑提醒 #

• 不要逐行遍历rowData、针对每个id单独发起HTTP请求，这种写法会导致大量重复的同id请求，网络开销极高
• 不要在组件初始化阶段手动修改rowData的字段属性，这种写法很容易同时触发Angular变更检测、ag-grid的行数据变更检测，导致不必要的整表重渲染
• 用自定义单元格渲染器时，记得在ag-grid模块中把自定义渲染组件声明为动态组件，避免模板编译报错

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