無法讀取的未定義的屬性「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事件監聽者。