无法读取的未定义的属性“getElementAtEvent”，打字稿

Question

尝试使用chart.js之调用图表的功能，当我得到这个错误，这是代码的样子，简化：

export class TrackerPage { 
    @ViewChild('doughnutCanvas') doughnutCanvas; 
    doughnutChart: any; 

    this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, { 
    type: 'doughnut', 
    data: { 
    labels: this.titles, 
    datasets: [{ 
     data: this.times, 
    }] 
    }, 
    options: { 
    onClick: this.timeSlotEdit, 
    } 
}); 

    timeSlotEdit(event, array){ 
    let activeElement = this.doughnutChart.getElementAtEvent(event); 
    console.log(activeElement); 

当我尝试console.log(this.doughnutChart)里面的timeSlotEdit()函数返回'undefined'。在另一个不相关的函数中做同样的事情会返回完整的图表信息。

Answer 1

如果您正在使用类似的回调，您将丢失this上下文。您应该将其包装在匿名箭头函数包装中，或使用bind。此外，图表初始化过早被调用。你必须使用ngAfterViewInit生命周期挂钩，以确保你的画布是HTML里面：

export class TrackerPage { 
    @ViewChild('doughnutCanvas') doughnutCanvas; 

    doughnutChart: Chart; 

    ngAfterViewInit() { 

    this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, { 
     type: 'doughnut', 
     data: { 
     labels: this.titles, 
     datasets: [{ 
      data: this.times, 
     }] 
     }, 
     options: { 
      onClick: this.timeSlotEdit.bind(this), 
     } 
    }); 
    } 

    timeSlotEdit(event, array){ 
    let activeElement = this.doughnutChart.getElementAtEvent(event); 
    console.log(activeElement); 
    } 
} 

与匿名箭头功能：

onClick: (event, array) => {this.timeSlotEdit(event, array)}, 

另一种方法是保持你有办法之前，但改变timeSlotEdit这样：

timeSlotEdit = (event, array) => { 

} 

这是为解除绑定事件是特别有用的，因为你可以使用函数引用祛瘀e事件监听者。