无法访问 NgOnInit 之外的数组答案

【问题标题】：Not able to access the array which is outside the NgOnInit无法访问 NgOnInit 之外的数组
【发布时间】：2019-08-27 01:12:42
【问题描述】：

我正在尝试访问该数组。使用console.log，当我按索引显示时它会给出未定义，如果我显示整个它会给出Array []。这些值被推入 NgOnInit 之外，这就是为什么我能够获得 newdates 数组但不能获得这个数组的原因。我不知道该怎么做。我需要将这些值传递给我的图表。

public min_temp = new Array(); 使用新数组给了我

Array(7)
0: 27.4
1: 28.7
2: 28.2
3: 28.9
4: 32.4
5: 30.2
6: 30.7
length: 7

但当我使用索引显示时仍然未定义

console.log(this.newdates);给了

(7) ["2019-03-30", "2019-03-31", "2019-04-01", "2019-04-02", "2019-04-03", "2019-04-04", "2019-04-05"]
0: "2019-03-30"
1: "2019-03-31"
2: "2019-04-01"
3: "2019-04-02"
4: "2019-04-03"
5: "2019-04-04"
6: "2019-04-05"
length: 7

代码：

  public weatherSearchForm: FormGroup;
  public weatherData: any;
  public show = 0;
  public weatherDataNext: any;
  public weatherDataHistory: any;

  public date: Date;
  public newdates = [];
  public history_data = [];
  public min_temp = new Array();
  public max_temp = [];
  public avg_temp = [];
  chart = [];

  dataSource: Object;
  chartConfig: Object;
  constructor(
    private formBuilder: FormBuilder,
    private apixuService: ApixuService,
    private datePipe: DatePipe,


  ) {}

  ngOnInit() {
    this.weatherSearchForm = this.formBuilder.group({
      location: [""]
    });

  for (let i = 6; i >=0; i--) {
  this.date = new Date();
  this.date.setDate( this.date.getDate() - i );
  this.newdates.push(this.datePipe.transform(this.date,"yyyy-MM-dd"));

  }
        console.log(this.newdates);

    }

  sendToAPIXU(formValues) {
    this.apixuService.getWeather(formValues.location).subscribe(data => {
      this.weatherData = data;
      console.log(this.weatherData);
    });
    this.apixuService.getNextWeather(formValues.location).subscribe(data => {
      this.weatherDataNext = data;
      console.log(this.weatherDataNext);
    });
    for (let i = 1; i < 8; i++)
    {    
    this.apixuService.getHistoryWeather(formValues.location,this.newdates[i-1]).subscribe(data => {
      this.weatherDataHistory = data;
      this.history_data.push(data);
      this.min_temp.push(this.weatherDataHistory.forecast.forecastday[0].day.mintemp_c);
      this.max_temp.push(this.weatherDataHistory.forecast.forecastday[0].day.maxtemp_c)
      this.avg_temp.push(this.weatherDataHistory.forecast.forecastday[0].day.avgtemp_c);

    });
    }
    console.log("Min_temp");
    console.log(this.min_temp);
    console.log(this.min_temp[1]);
.
.
.
.

【问题讨论】：

标签： angular

【解决方案1】：

因为this.apixuService.getHistoryWeather调用是异步的，所以你需要将控制台日志移动到订阅中，在这行代码之后它会运行下一行代码立即

this.apixuService.getHistoryWeather(formValues.location,this.newdates[i-1]).subscribe(data => {
      this.weatherDataHistory = data;
      this.history_data.push(data);
      this.min_temp.push(this.weatherDataHistory.forecast.forecastday[0].day.mintemp_c);
      this.max_temp.push(this.weatherDataHistory.forecast.forecastday[0].day.maxtemp_c)
      this.avg_temp.push(this.weatherDataHistory.forecast.forecastday[0].day.avgtemp_c);

      console.log("Min_temp");
      console.log(this.min_temp);
      console.log(this.min_temp[1]);

    });
    }

【讨论】：

【解决方案2】：

在将this.min_temp 数据传递到您的图表之前，您应该等待所有可观察的数据返回。您可以利用 RxJS 的forkjoin 等待所有订阅完成。

const observableDataList: Observable[] = [];

for (let i = 1; i < 8; i++) {   
    observableDataList.push(this.apixuService.getHistoryWeather(formValues.location,this.newdates[i-1]));
}

Observable.forkJoin(observableDataList)
  .subscribe(response => {
    //console.log(response);
    // the above should print out all the data after looping through all 8 iterations
    // this.min_temp = ....
    .
    .

  });

【讨论】：