Angular表格替换数组元素后视图不刷新的解决方法

Angular的变更检测机制默认通过引用变化触发视图更新。直接通过索引替换数组元素时，数组本身的引用未发生改变，因此Angular无法检测到数据变化，导致表格视图不更新。以下是几种可行的解决办法：

• 方法一：创建新数组替换原数组
  通过展开运算符或slice()生成新数组，替换原filteredElements，利用引用变化触发变更检测：

  const index = this.filteredElements.findIndex(el => el.id === old.id);
  this.filteredElements = [
    ...this.filteredElements.slice(0, index),
    newElement,
    ...this.filteredElements.slice(index + 1)
  ];
  

• 方法二：使用ChangeDetectorRef强制触发变更检测
  导入ChangeDetectorRef，在替换元素后手动标记视图需要更新：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 替换元素逻辑
  const index = this.filteredElements.findIndex(el => el.id === old.id);
  this.filteredElements[index] = newElement;
  // 强制检测并更新视图
  this.cdr.detectChanges();
  

• 方法三：使用数组splice()方法修改原数组
  splice()属于数组可变方法，会直接修改原数组且能被Angular的变更检测捕获：

  const index = this.filteredElements.findIndex(el => el.id === old.id);
  this.filteredElements.splice(index, 1, newElement);
  

• 方法四：通过NgZone手动触发变更检测
  导入NgZone，在替换元素后通知Angular执行变更检测：

  import { NgZone } from '@angular/core';
  
  constructor(private ngZone: NgZone) {}
  
  // 替换元素逻辑
  const index = this.filteredElements.findIndex(el => el.id === old.id);
  this.filteredElements[index] = newElement;
  // 手动触发变更检测
  this.ngZone.run(() => {});
  

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