Question

我正在尝试访问阵列。使用console.log时，按索引显示时未定义；如果显示整体，则为Array []。这些值被推送到NgOnInit之外，这就是为什么我能够获取newdates数组而不是这个数组的原因。我不知道该怎么做。我需要将这些值传递到图形中。

public min_temp = new Array(); 使用新的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]);
.
.
.
.

Answer 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]);

    });
    }

Answer 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 = ....
    .
    .

  });

无法访问NgOnInit外部的阵列

2 个答案: