Angular中数组内对象属性赋值后变量变更值未更新是什么原因？

• JavaScript中字符串属于基础数据类型，基础类型的赋值执行值拷贝逻辑：你初始化people数组时，{ name: this.name }仅会将当前this.name的值Brian复制后赋值给对象的name属性，赋值完成后people[0].name和this.name是两个完全独立的变量，后续修改this.name不会影响已经完成赋值的对象属性。
• 补充：你示例代码中console.log(people[0].name)存在语法错误，需要加this访问类属性，改为console.log(this.people[0].name)。

方案1：通过setter实现自动同步 #

给name属性添加存取器，每次修改name时主动同步数组内的对应属性，代码示例：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  private _name = 'Brian';
  get name() {
    return this._name;
  }
  set name(val: string) {
    this._name = val;
    // 同步更新数组内所有对象的name属性
    this.people.forEach(item => item.name = val);
  }
  people = [{ name: this.name }];

  ngOnInit() {
    setTimeout(() => {
      this.name = 'Eric';
      console.log(this.people[0].name); // 输出 Eric
    }, 5000);
  }
}

方案2：用引用类型包裹值实现联动 #

因为引用类型的赋值执行引用传递逻辑，修改引用指向的属性会同步到所有持有该引用的位置，代码示例：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  // 用对象包裹字符串，变成引用类型
  name = { value: 'Brian' };
  // 存入引用而非值
  people = [{ nameRef: this.name }];

  ngOnInit() {
    setTimeout(() => {
      this.name.value = 'Eric';
      console.log(this.people[0].nameRef.value); // 输出 Eric
    }, 5000);
  }
}

方案3：视图层直接绑定外层变量（仅适用于模板渲染场景） #

如果people内的name仅用于模板渲染，无需冗余存储，直接在模板中绑定外层的name即可天然同步，示例模板代码：

<div *ngFor="let person of people">
  <!-- 直接绑定外层name，无需存在person对象里 -->
  姓名：{{ name }}
</div>

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