Angular DevExtreme dxSelectBox的onSelectionChanged回调无法访问this对象

这个问题我之前帮不少开发者解决过，核心原因就是函数上下文（this指向）的绑定问题。

为什么会出现undefined？ #

在JavaScript中，函数的this指向是由调用它的方式决定的。当你把onSelectionChangedCallback直接作为回调传给dxSelectBox时，DevExtreme组件在触发事件时，会以自身的上下文来调用这个函数，导致this不再指向你的Angular组件实例。这时候你访问this.test()或者this.products，自然会得到undefined——因为当前的this根本不是你的组件对象。

三种可行的解决方案 #

1. 使用箭头函数定义回调（最推荐）

箭头函数不会创建自己的this上下文，它会继承外层（也就是你的组件实例）的this。直接把回调改成箭头函数形式即可：

products: any[];

// 用箭头函数定义回调
onSelectionChangedCallback = (event) => {
  let value = event.selectedItem;
  this.test(); // 现在可以正常调用了
  console.log(this.products); // 也能访问到组件的products变量了
}

test() {
  alert('');
}

2. 在ngOnInit中手动绑定this

如果你还是想用普通函数定义回调，可以在组件初始化时，用bind()方法把this强制绑定到组件实例上：

products: any[];

ngOnInit() {
  // 手动绑定this到组件实例
  this.onSelectionChangedCallback = this.onSelectionChangedCallback.bind(this);
}

onSelectionChangedCallback(event) {
  let value = event.selectedItem;
  this.test();
  console.log(this.products);
}

test() {
  alert('');
}

3. 在模板中绑定this（不推荐频繁使用）

你也可以在模板里直接给回调函数绑定this，不过这种方式每次组件渲染都会创建一个新的函数实例，在大型项目中可能影响性能：

<dx-select-box 
  [dataSource]="yourDataSource"
  (onSelectionChanged)="onSelectionChangedCallback.bind(this, $event)"
></dx-select-box>

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