离子+类型脚本声明的数组在函数中未定义

Question

我正在创建一个离子应用程序，其中我需要在Chart.js中绘制值，并将绘制的值保存在数组中。问题是声明的数组在使用的函数中返回为未定义。我尝试了很多不同类型的声明和位置，但都不起作用。下面你可以检查我的整个代码。为此页面触发的第一个函数是startBreath()。未定义的变量是updateRR()函数中的this.capturedRRTime；

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-training',
  templateUrl: './training.page.html',
  styleUrls: ['./training.page.scss'],
})
export class TrainingPage implements OnInit {

    @ViewChild('lineCanvas') lineCanvas : ElementRef;

    totalSeconds = 0;
    time_limit = 999999; //in seconds
    ctx:any;
    //canvas:any;
    hrv_chart:any;
    plotHRV:any;
    plotRR:any;
    min:any;
    max:any;
    circle_breath:any;
    capturedBPM:Array<any>;
    capturedBPMTime:Array<any>;
    capturedRRTime:Array<any>;

    config = {
      type: 'line',
      data: {
          labels: [],
            datasets: [{
              data: [],
              borderWidth: 1,
              borderColor:'#84C1D3'
            }]
      },
      options: {
        responsive: true,
        tooltips: {
            enabled: false
        },
        title: {
            display: false
        },
        legend: {
            display: false
        },
        elements: {
            point:{
                radius: 2
            }
        },
        scales: {
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'bpm'
                },
                ticks: {
                    max: 200,
                    min: 0,
                    stepSize: 20
                }
            }],
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'segundos'
                }
            }]
        }
      }
  }

  constructor() {}

  ngOnInit(){}

startBreath(){

    //var capturedRRTime: number[] = [];

    this.circle_breath = document.getElementById("circle_breath");

    if(this.circle_breath.style.animationName == "none"){
      this.circle_breath.style.animationName = "breath";
      this.createHRV();
      this.updateHRV();
    }

    if(this.circle_breath.style.webkitAnimationPlayState != "running"){
      this.circle_breath.style.webkitAnimationPlayState = "running";
      this.createHRV();
      this.updateHRV();
    }
}

stopBreath(){
  this.circle_breath = document.getElementById("circle_breath");
  this.circle_breath.style.animationName = "none";

  this.stopUpdateHRV();
  this.consolidateHRV();
}

getRandomIntInclusive(){
    this.min = Math.ceil(60);
    this.max = Math.floor(140);
    return Math.floor(Math.random() * (this.max - this.min + 1)) + this.min;
}

createHRV(){

    if(this.hrv_chart !== undefined && this.hrv_chart !== null){
        this.resetHRV();
        this.resetResume();
    }
    else{
        this.hrv_chart = new Chart(this.lineCanvas.nativeElement,this.config);
    }
}

resetResume(){
    //this.capturedRRTime = [];
    //this.capturedBPM = [];
    //this.capturedBPMTime = [];
    document.getElementById('bpm_atual').innerHTML = '0';
    document.getElementById('curr_rr_time').innerHTML = '0';
    document.getElementById('avg_rr_time').innerHTML = '0';
}

resetHRV(){
    this.totalSeconds = 0;
    this.stopUpdateHRV();
    this.hrv_chart.data.datasets[0].data = [];
    this.hrv_chart.data.labels = [];
    this.hrv_chart.update();
}

updateHRV(){

    this.updateRR();

    this.plotHRV = setInterval(function(){

        var maxXPoints = 60;
        var calculatedBPM = "";

        //console.log(this.hrv_chart);

        if(this.hrv_chart.data.labels.length > maxXPoints){
            this.hrv_chart.data.labels.shift();
            //removedXPoints.push(window.hrv_chart.data.datasets[0].data.slice(-1)[0]);
            this.hrv_chart.data.datasets[0].data.shift();
        }

        //TO-DO implement with real BPM - Sprint 3
        calculatedBPM = this.getRandomIntInclusive();

        this.capturedBPM.push(calculatedBPM);
        this.hrv_chart.data.datasets[0].data.push(calculatedBPM);
        document.getElementById('bpm_atual').innerHTML = calculatedBPM;

        var BPMTime = this.totalSeconds +=1;
        this.capturedBPMTime.push(BPMTime);
        this.hrv_chart.data.labels.push(BPMTime);

        this.hrv_chart.update();

        //stop the chart update
        if(this.totalSeconds === this.time_limit){
            clearInterval(this.plotHRV);
        }

    },1000);
}

updateRR(){
    var calculatedRRTime = 0;

    this.plotRR = setInterval(() => {
        //calculatedRRTime = this.getRandomFloat();
        calculatedRRTime = Math.floor(Math.random() * (1.1 - 0.6 + 1)) + 0.6;
        document.getElementById('curr_rr_time').innerHTML = calculatedRRTime.toString();

        console.log(this.capturedRRTime);

        this.capturedRRTime.push(calculatedRRTime);
    },600);
}

getRandomFloat(){
    this.min = 0.6;
    this.max = 1.1;
    return (Math.random() * (this.min - this.max) + this.max).toFixed(3);
}

avgArray(values){
    var sum = 0;
    var count = values.length;
    for (var i = 0; i < count; i++) {
        sum = sum + parseFloat(values[i]);
    }

    return (sum / count).toFixed(3);
}

stopUpdateHRV(){

    document.getElementById('avg_rr_time').innerHTML = this.avgArray(this.capturedRRTime);
    clearInterval(this.plotHRV);
    clearInterval(this.plotRR);
}

consolidateHRV(){
    this.hrv_chart.data.labels = (this.capturedBPMTime);
    this.hrv_chart.data.datasets[0].data = (this.capturedBPM);
    this.hrv_chart.update();
}

}

Answer 1

您必须在函数内使用arrow function (=>)而不是function keyword。

你需要修改下面的代码。

this.plotHRV = setInterval(() => {
...
...
});