속성 'getElementAtEvent'정의의, 타이프 라이터

Question

chart.js를 사용하여 차트의 함수를 호출 할 때 나는이 오류를 얻고있다

을 읽을 수 없습니다,이 코드를 단순화, 같은 모습입니다의 내부에서 console.log(this.doughnutChart)을 시도하면 'undefined'을 반환합니다. 관련이없는 다른 함수에서 같은 작업을 수행하면 전체 차트 정보가 반환됩니다.

Answer 1

이와 같이 콜백을 사용하는 경우 this 컨텍스트가 손실됩니다. 익명의 화살표 함수 래퍼로 포장하거나 bind을 사용해야합니다. 또한 차트 초기화가 너무 빨리 호출됩니다. 익명의 화살표 기능으로

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)}, 

또 다른 방법은 그것에게 당신이했던 방식을 유지하는 것입니다 당신은 당신의 캔버스는 HTML 내에 있는지 확인하기 위해 ngAfterViewInit 라이프 사이클 훅을 사용해야합니다 그 전에,하지만이에 timeSlotEdit을 변경

timeSlotEdit = (event, array) => { 

} 

당신이 remov하기 위해 함수 참조를 사용할 수 있기 때문에이, 바인딩 해제 이벤트에 특히 유용하다 이벤트 리스너.