Angular中更新数组对象值失败，该如何解决此问题？

你的代码问题出在updateVal方法的链式赋值：

this.arr = this.arr[0].item = 'Row9';

这行代码会先将this.arr[0].item设为'Row9'，随后把**该赋值操作的返回值（字符串'Row9'）**赋值给this.arr，导致原数组被替换成字符串，自然无法正确更新数组对象的属性。

正确实现方式 #

直接修改目标对象的属性即可，无需重新赋值整个数组：

updateVal() {
  this.arr[0].item = 'Row9';
  console.log(this.arr);
}

如果遇到视图未同步更新的情况（Angular变更检测未触发），可以采用不可变更新的方式创建新数组：

updateVal() {
  this.arr = [
    // 替换第一个对象的item属性，保留其余元素
    {...this.arr[0], item: 'Row9'},
    ...this.arr.slice(1)
  ];
  console.log(this.arr);
}

修改后调用updateVal，数组第一个对象的item属性会被正确更新为'Row9'，this.arr也会保持数组类型，控制台将输出正确的数组结构。

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