Angular中Kendo Grid服务实例化后回调仍报错的问题

为什么会出现这个错误？ #

核心原因是函数上下文丢失：

• *ngIf="canLoad()"确实能保证组件渲染时myservice已经完成实例化，但rowCallback作为函数传递给Kendo Grid的rowClass属性时，它的this上下文会被替换为Grid组件的实例，而非你的组件实例，所以在rowCallback里访问this.myservice自然会得到undefined。
• 虽然Angular的变更检测会多次触发canLoad()，但这并不是报错的直接诱因，关键问题还是this指向错误。

解决方法 #

有两种简单有效的修复方式：

1. 在构造函数中绑定上下文

在组件的constructor里，给rowCallback绑定当前组件的this，确保函数执行时上下文正确：

constructor(private myservice: MyService) {
  this.rowCallback = this.rowCallback.bind(this);
}

public rowCallback(context: RowClassArgs) {
  this.myservice.doSomething();
}

2. 使用箭头函数定义rowCallback

箭头函数会自动捕获当前组件的this上下文，不会出现指向偏移的问题：

public rowCallback = (context: RowClassArgs) => {
  this.myservice.doSomething();
}

额外说明 #

如果你的myservice是异步初始化的（比如依赖HTTP请求返回结果），那canLoad()需要改成异步判断逻辑，比如用Observable配合*ngIf="myservice$ | async"。但从你的代码来看，服务应该是同步注入的，所以上面两种方法足以解决问题。

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