错误类型错误： 无法读取未定义的属性'testMethod'

Question

我有组件的以下代码。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 });
}
}
},
}
})
}

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

1. 我在testMethod((中的第一个console.log返回所需的值，这意味着方法运行良好，值存储在dataArray，但当我尝试读取onRefreshLinecap.data.datasets[0].data.push({x: Date.now(), y: this.dataArray[2] });函数内的数据数组时，它会给我错误错误类型错误：无法读取未定义的属性"dataArray">
2. 如果我在像var ws=this.testMethod()这样的onRefresh函数中调用testMethod，它会给我错误error TypeError:无法读取未定义的属性"testMethod"。console.log(this.testMethod())的后续调用也抛出了相同的错误

我做错了什么？我找不到它。如何解决此代码的未定义错误。如果我在onRefresh函数外部调用testMethod，它可以很好地工作，但它返回空的dataArray。

Answer 1

Javascript函数中this关键字的含义取决于用法。请参阅此处了解更多详细信息。

无论哪种方式，它都不会引用类的作用域。要使用this关键字引用类的作用域，请使用箭头函数表达式。尝试以下

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

Answer 2

onRefresh函数内部的作用域与组件作用域不同，因此this未定义对onRefresh使用箭头函数，如

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