Angular 2/4 Typescript 数组内容未更新

Question

我在更新 Angular 组件中的数组内容时遇到问题。

创建名为 arr 的数组来存储数据集用于 ChartJS 图表的值。

在ngOnInit 上，我运行retrieveTempDataReturn() 函数，该函数返回_arr，这是一个从数据服务中检索到的值的数组，我将_arr 数组分配给我在顶部声明的arr 数组。

页面加载后，我运行displayArray() 函数，该函数使用按钮上的单击事件显示arr 数组的内容。浏览器控制台中的输出如下：

Array contents: 22.1,22.1,23.1,24.1,25.1,26.1,25.1,24.1,22.1,21.1 

因此，我可以看到检索到的数据成功更新到arr数组中。

然后，我使用按钮上的单击事件运行另一个函数 retrieveHumidDataAssign()，它从同一数据服务中检索另一组数据，并立即将数据分配到 arr 数组中。稍后在函数中，我 console.log() arr 数组的内容，我可以看到 arr 数组中更新的值。浏览器控制台中的输出如下：

Array assigned Humid: 56,56,56,56,56,56,56,56,56,56

但是当我再次displayArray()查看arr数组中的内容时，内容还是原来的内容。浏览器控制台中的输出如下：

Array contents: 22.1,22.1,23.1,24.1,25.1,26.1,25.1,24.1,22.1,21.1

arr 数组的内容似乎在retrieveHumidDataAssign() 的console.log 部分发生了变化。但是当我单独运行另一个函数来显示它的内容时，它并没有改变。

为什么会这样？以及如何更新数组中的内容？请帮我。

下面是组件文件：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import {BaseChartDirective} from 'ng2-charts/ng2-charts';

@Component({
  templateUrl: 'chartjs.component.html'
})
export class ChartJSComponent {

  arr = [];

  constructor(private dataService: DataService){
  }

  ngOnInit(){
    this.arr = this.retrieveTempDataReturn();
  }

//function that retrieves and returns array of temperature values
  retrieveTempDataReturn(){
    var _arr = new Array();
    this.dataService.getData().subscribe(function(response){
      console.log("Response: " + JSON.stringify(response));
      for(var item of response){
        console.log("Pushing " + item.Temperature);
        _arr.push(item.Temperature);
      }
      console.log("Array returned: " + _arr);
    });
    return _arr;
  }

//function that retrieves and assign array into the "arr" array
  retrieveHumidDataAssign(){
    var _arr = new Array();
    this.dataService.getData().subscribe(function(response){
      console.log("Response: " + JSON.stringify(response));
      for(var item of response){
        _arr.push(item.Humidity);
      }
      this.arr = _arr;
      console.log("Array assigned Humid: " + this.arr);
    });
  }

//display the data on the chart by using "arr" array in the dataset for the chart
  refreshChart(){
    console.log("To display: " + this.arr);
    this.datasets = [{
      label: "Values",
      data: this.arr 
    }];
  }

//function to display the contents of the array
  displayArray(){
    console.log("Array contents: " + this.arr);
  }

//arrays that are used by Chart JS chart for data visualization
  private datasets = [
    {
      label: "Values",
      data: []
    }
  ];

  private labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  private options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

}

Answer 1

这里你在callbacks中使用this时必须保留上下文，否则this将转向回调函数本身。

你可以在这里使用arrow function

//function that retrieves and assign array into the "arr" array
retrieveHumidDataAssign(){
  var _arr = new Array();
  this.dataService.getData().subscribe(response => {     // <----arrow function here
    ...
    this.arr = _arr;
    console.log("Array assigned Humid: " + this.arr);
  });
}