Angular中在单元格渲染器里对比数组并按条件替换值的实现方法

核心思路 #

先把internal数组转换成Map结构，用name作为键、doName作为值，把后续查找匹配项的时间复杂度从O(n)降到O(1)，提升性能。之后在单元格渲染逻辑中，根据当前plans项的idData去Map中查找，存在则返回对应的doName，不存在则直接返回idData。

具体实现步骤 #

1. 预处理internal数组为Map #

在id.cell-renderer.ts文件中，先将原始数组转换为Map（可在组件类的构造函数或ngOnInit钩子中处理）：

// 修正原数组语法错误，字符串值需添加引号
internal = [
  {"name": 123, "doName": "cityA", "dataType": "string"},
  {"name": 345, "doName": "cityB", "dataType": "string"},
  {"name": 567, "doName": "cityC", "dataType": "string"},
  {"name": 789, "doName": "cityD", "dataType": "string"},
];

private internalMap: Map<number, string>;

ngOnInit() {
  // 将internal数组转换为Map，键为name，值为doName
  this.internalMap = new Map(this.internal.map(item => [item.name, item.doName]));
}

2. 单元格渲染逻辑实现 #

如果是AG Grid的单元格渲染器，在渲染方法中处理当前行的plans数据：

// params.data为当前行对应的plans项
renderValue(params: any): string {
  const idData = params.data.idData;
  // 查找匹配值，无匹配则返回原idData
  return this.internalMap.get(idData) || idData;
}

如果需要批量替换整个plans数组的idData字段，可使用以下方法：

// 批量转换plans数组
transformPlans(): void {
  this.plans = this.plans.map(plan => ({
    ...plan,
    idData: this.internalMap.get(plan.idData) || plan.idData
  }));
}

代码说明 #

• Map优化：避免每次查找都遍历整个internal数组，数据量越大，性能提升越明显。
• 语法修正：原代码中cityA、personA等字符串未加引号属于语法错误，实际开发中必须修正。
• 兼容性：Map是ES6标准特性，Angular项目默认支持，无需额外配置。

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