ERROR TypeError.无法读取未定义的'testMethod'属性。无法读取未定义的 "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. 我的第一个 console.log 在 测试方法() 返回所需的值，这意味着方法工作正常，值被存储在 数据数组 但当我试图阅读 数据数组 里面 关于刷新 Linecap.data.datasets[0].data.push({x: Date.now(), y: this.dataArray[2] }); 函数，它给我的错误 ERROR TypeError.类型错误，无法读取未定义的'dataArray'属性。无法读取未定义的属性'dataArray'。
2. 如果我在onRefresh函数中调用testMethod，如 var ws=this.testMethod() 它给我的错误 ERROR TypeError.无法读取未定义的'testMethod'属性。无法读取未定义的 "testMethod "属性。. 随后调用 console.log(this.testMethod()) 也出现了同样的错误

我做错了什么？我无法找到它。我如何解决这段代码的未定义错误。如果我在onRefresh函数之外调用testMethod，它可以完美地工作，但它返回的是空的dataArray。

Answer 1

意思是 this Javascript函数中的关键字取决于用法。参见 此处 了解更多详情。

无论哪种方式，它都不会引用类的作用域。如果要使用 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)  => { ... }