错误类型错误：无法读取未定义的属性“testMethod”答案

【问题标题】：ERROR TypeError: Cannot read property 'testMethod' of undefined错误类型错误：无法读取未定义的属性“testMethod”
【发布时间】：2020-08-16 11:17:30
【问题描述】：

我有以下 component.ts

的代码

export class HomeComponent implements OnInit {
  Linecap = {};
  dataArray=[];

  constructor(private chartGetDataService: ChartGetDataService) {
 }

  ngOnInit(): void {
         this.chartPlotting();
  }


public testMethod(){
  this.chartGetDataService.getLatestData1().subscribe( list=>{ this.dataArray=list.map(item=>{return item.payload.val()});} );
  console.log(this.dataArray);
  return this.dataArray;
 }

public chartPlotting(){

  this.Linecap= new Chart('canvas',
  {
   type: 'line',
   data: { labels: [moment().toDate().getTime()], datasets: [{ label:'Flow',yAxisID: 'A',lineTension: 0, data: [] , borderColor: '#3cb371', fill: false ,borderWidth:2},
                                                            ]
         },
   options: { responsive: true,animation: {duration: 0},hover: {animationDuration: 0},responsiveAnimationDuration: 0,
              scales: { xAxes: [{ type: 'realtime',time: { parser: undefined} , display: true }],
                        yAxes: [{ id:'A', display: true, ticks: { beginAtZero: true, fontColor:'#f4af07',  stepSize: 10, max: 100}},
                                ]
                      },

              plugins: {  streaming: {
                      duration: 60000,
                      refresh: 2000,
                      delay: 3000,
                      pause: false,
                      ttl: undefined,
                      frameRate: 2,
                      onRefresh: function(Linecap) {

                        console.log(this.testMethod())
                        console.log(this.dataArray)

                                                                        Linecap.data.datasets[0].data.push({x: Date.now(), y: this.dataArray[2] });
                        Linecap.update({ preservation: true });
                        }

                    }
},

}

})

}

我在这段代码中遇到了 2 个问题。

我在 testMethod() 中的第一个 console.log 返回所需的值，这意味着方法工作正常并且值存储在 dataArray 但是当我尝试读取 onRefresh Linecap.data.datasets[0].data.push({x: Date.now(), y: this.dataArray[2] }); 函数中的 dataArray 它给了我错误 ERROR TypeError: Cannot read property 'dataArray' of undefined
如果我在像var ws=this.testMethod() 这样的 onRefresh 函数中调用 testMethod，它会给我错误 ERROR TypeError: Cannot read property 'testMethod' of undefined。后续调用 console.log(this.testMethod()) 也会抛出同样的错误

我做错了什么？我找不到它。如何解决此代码的未定义错误。如果我在 onRefresh 函数之外调用 testMethod，它可以完美运行，但它返回空 dataArray。

【问题讨论】：

标签： javascript angular typescript chart.js chartjs-2.6.0

【解决方案1】：

Javascript 函数中this 关键字的含义取决于用法。详情请见here。

无论哪种方式，它都不会引用类的范围。要使用 this 关键字引用类的范围，请使用 arrow function expression。试试下面的

plugins: {  
    .
    .
    .
    onRefresh: (Linecap) => {
      console.log(this.testMethod())
      console.log(this.dataArray)
      Linecap.data.datasets[0].data.push({x: Date.now(), y: this.dataArray[2] });
      Linecap.update({ preservation: true });
    }
  }
}

【讨论】：

【解决方案2】：

onRefresh 函数内的作用域与组件作用域不同，因此 this 未定义像这样为onRefresh 使用箭头函数

onRefresh: (Linecap)  => { ... }

【讨论】：