Angular中Chart JS插件事件回调无法访问组件变量的问题

你遇到的问题核心是普通函数回调的this指向问题：
当用function()定义onDrag/onDragEnd回调时，函数内部的this指向当前的dragData配置对象，而非你的组件实例。因此this.isOnDrag会被判定为要访问dragData的属性，自然找不到对应定义，触发TS报错。

有两种简洁的修复方式：

方法1：使用箭头函数 #

箭头函数不会绑定自身的this，会继承外层作用域的this（即你的组件实例），可直接访问isOnDrag变量：

dragData: {
  dragX: true,
  onDragStart: (e: Event) => {
    console.log(e)
  },
  onDrag: (e: Event, datasetIndex: any, index: any, value: { x: number; }) => {
    this.isOnDrag = true; // 此时this指向组件实例
    value.x = new Date(value.x + 43200000).setHours(0, 0, 0, 0);
  },
  onDragEnd: (e: Event, datasetIndex: any, index: any, value: { x: number; }) => {
    this.isOnDrag = false; // 同样指向组件实例
  },
},

方法2：提前保存组件的this到变量 #

如果因场景限制不能使用箭头函数，可在配置dragData前，将组件实例的this保存到变量中，再在回调里通过该变量访问isOnDrag：

const self = this; // 保存组件实例的this
dragData: {
  dragX: true,
  onDragStart: function(e: Event) {
    console.log(e)
  },
  onDrag: function(e: Event, datasetIndex: any, index: any, value: { x: number; }) {
    self.isOnDrag = true; // 使用提前保存的self访问组件变量
    value.x = new Date(value.x + 43200000).setHours(0, 0, 0, 0);
  },
  onDragEnd: function(e: Event, datasetIndex: any, index: any, value: { x: number; }) {
    self.isOnDrag = false;
  },
},

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