Angular中Stimulsoft Report JS保存到服务器时onSaveReport内this为undefined问题

问题根因 #

这是典型的this指向丢失问题：你直接将类方法赋值给第三方组件的事件回调时，方法的执行上下文会被绑定到触发事件的报表设计器实例上，而非你的Angular组件实例，因此方法内部的this指向的是设计器对象，自然访问不到你在组件内定义的document成员。

解决方案 #

两种常用修复方案任选其一即可：

1. 使用箭头函数绑定回调
   箭头函数会继承定义位置的上下文this，也就是你的组件实例，推荐优先用这种写法：
   要么在绑定时用箭头函数包裹原有方法：

// 修改ngOnInit里的绑定逻辑
this.designer.onSaveReport = (e) => this.onReportSave(e);

要么直接把回调方法定义为箭头函数属性：

private onReportSave = (e: any) => {
  this.document.body = e.report.saveToJsonString();
}

2. 用bind方法显式绑定上下文
   在绑定时手动将方法的this绑定到当前组件实例：

// 修改ngOnInit里的绑定逻辑
this.designer.onSaveReport = this.onReportSave.bind(this);

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