Angular 4 TypeScript中this语法解构赋值未按预期生效问题

我之前在Angular项目里也踩过类似的解构赋值坑，结合你的情况，大概率是这几个原因导致的，一个个来看：

1. 解构时没有正确绑定到组件实例的属性 #

你写的{this.firstName, this.lastName} = this.data;其实是错误的语法，这样写会被解析为创建局部变量，而不是给组件的this.firstName和this.lastName赋值。

正确的写法有两种：

• 方式一：明确指定解构目标为实例属性（需要用括号包裹）

  ({ firstName: this.firstName, lastName: this.lastName } = this.data);
  

  这里的括号是必须的，因为JavaScript/TypeScript不允许赋值语句以大括号开头，否则会被当作代码块解析。

• 方式二：先解构到局部变量，再赋值给实例属性（更直观）

  const { firstName, lastName } = this.data;
  this.firstName = firstName;
  this.lastName = lastName;
  

  这种写法可读性更强，也不容易出错，我自己更常用这种方式。

2. 组件类中未提前声明目标属性 #

如果你的组件类里没有先定义firstName和lastName这两个属性，TypeScript会把解构出来的变量当作局部变量处理，而不是挂载到组件实例上。

一定要确保类里提前声明并初始化这两个属性：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 提前声明并初始化属性
  firstName: string | null = null;
  lastName: string | null = null;
  data = { firstName: 'joe', lastName: 'smith' };

  ngOnInit() {
    // 在这里执行解构赋值
    const { firstName, lastName } = this.data;
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

3. 回调函数中this指向错误 #

如果你的解构代码是在回调函数（比如setTimeout、Promise回调）里执行的，要注意this的指向是否正确。普通函数会改变this的指向，导致赋值到了错误的上下文。

错误示例：

ngOnInit() {
  setTimeout(function() {
    // 这里的this不是组件实例，赋值无效
    const { firstName, lastName } = this.data;
    this.firstName = firstName;
  });
}

解决办法是使用箭头函数，它会继承外层的this指向：

ngOnInit() {
  setTimeout(() => {
    const { firstName, lastName } = this.data;
    this.firstName = firstName;
    this.lastName = lastName;
  });
}

按照上面的方法调整后，你的this.firstName和this.lastName应该就能正确获取到this.data里的值了。

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