Angular 8 如何实现将对象推入数组的操作

核心基础实现 #

不需要额外引入依赖，按以下步骤操作即可完成基础推入：

• 首先在组件类中提前初始化目标数组，避免数组为undefined导致push方法抛错：

// 可根据业务对象定义对应泛型，无明确类型可使用any
targetArray: any[] = [];

• 从已经获取的this.selectedParameterContext中提取需要推入的指定对象，注意不要直接将整个上下文对象塞入数组，按实际业务的字段路径取值：

// 将specificNode替换为你实际要提取的对象字段路径
const targetObject = this.selectedParameterContext.specificNode;
// 执行推入操作
this.targetArray.push(targetObject);

Angular 8 场景下的常见问题处理 #

很多开发者实现推入后会遇到“数组数据变了但视图不更新”的问题，这是Zone.js变更检测机制的固有特性，按对应场景处理即可：

• 如果推入操作是在Angular运行上下文外触发的（比如第三方组件的事件回调、原生setTimeout/setInterval、跨域消息回调），直接push原数组不会触发自动变更检测，此时可以通过生成新数组引用的方式简化处理，替换直接push的写法：

// 生成全新的数组引用，触发框架默认的变更检测流程
this.targetArray = [...this.targetArray, targetObject];

• 如果业务必须保留原数组的引用（比如数组元素绑定了和索引强关联的DOM事件），可以在组件构造函数中注入ChangeDetectorRef服务，在push完成后手动触发一次检测：

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

// 构造函数注入服务
constructor(private cdr: ChangeDetectorRef) {}

// 完成推入操作
this.targetArray.push(targetObject);
// 手动触发变更检测，同步视图状态
this.cdr.detectChanges();

• 如果业务需要避免重复推入同一个对象，可以在推入前加一层唯一值判断：

// 将uniqueKey替换为业务里对象的唯一标识字段
const isExist = this.targetArray.some(item => item.uniqueKey === targetObject.uniqueKey);
if (!isExist) {
  this.targetArray.push(targetObject);
}

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