从 HTTP GET 请求填充后，数组似乎评估为空

Question

我正在向 API 调用 HTTP GET，它会返回天气数据，以显示到 ag-grid table。代码如下：

getWeatherData(date?:Date){

    let array_table_rowData = new Array();
    let dte1 = new Date();
    if(date){
      dte1 = date;
    }
    dte1.setDate(dte1.getDate() - 28);
    let dte2 = dte1.setDate(dte1.getDate() + 4);
    let dte3 = dte1.setDate(dte1.getDate() + 4);
    let dte4 = dte1.setDate(dte1.getDate() + 4);
    let dte5 = dte1.setDate(dte1.getDate() + 4);
    let dte6 = dte1.setDate(dte1.getDate() + 4);
    let dte7 = dte1.setDate(dte1.getDate() + 4);

    let url_dte1 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte1, "yyyy-MM-dd");    
    let url_dte2 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte2, "yyyy-MM-dd");    
    let url_dte3 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte3, "yyyy-MM-dd");    
    let url_dte4 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte4, "yyyy-MM-dd");    
    let url_dte5 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte5, "yyyy-MM-dd");    
    let url_dte6 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte6, "yyyy-MM-dd");    
    let url_dte7 = this.url_getWeatherData + "?date=" + this.datePipe.transform(dte7, "yyyy-MM-dd");
    let array_url = [url_dte1,url_dte2,url_dte3,url_dte4,url_dte5,url_dte6,url_dte7];

    for(let i=0; i < array_url.length; i++){

        this.http.get(array_url[i]).subscribe(data => {

            let forecasts_pull = data.items[0].forecasts;
            for(let j=0; j < forecasts_pull.length; j++){
              let forecast = forecasts_pull[j]
              console.log(array_url[i]);
              this.array_rowData.push(
                {
                  date:forecast.date,
                  //tempHigh:forecast.temperature.high,
                  //tempLow:forecast.temperature.low,
                  //humiHigh:forecast.relative_humidity.high,
                  //humiLow:forecast.relative_humidity.low
                });
            }

        });
    }
  }

  async onGridReady(params){
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    await this.getWeatherData();

    console.log(this.table_rowData);

    console.log(this.array_rowData);

    this.array_rowData.forEach(forecast =>{
      console.log(forecast)
    });

    this.gridApi.setRowData(this.table_rowData);
  }
}

这调用了API就好了，但是ag-grid无法检测到数组中有对象。当我检查 console.log 来比较硬编码数组 (table_rowData) 与 getWeatherData 的数组时，我发现：

non-empty array vs apparent empty array

我知道其中一个问题可能是当 ag-grid 完成加载和评估时，它们应该从中读取的数组似乎仍然是空的。但是，await getWeatherData 之后的运行 setRowData 会产生相同的结果。是否有任何等待强制 ag-grid 等到阵列完成评估之后？我感觉这与我选择获取数据的方式有关。

感谢你们提供的任何建议！

Answer 1

Ag-grid不知道数组的变化。您需要重构您的代码，因此您将在所有 HTTP 请求完成后调用 setRowData()。这是示例，您可以如何做到这一点。

...
getWeatherData(date?:Date) {
    ...

    // create array of http urls
    const array_url: Array<string> = [...];

    // create array of observables
    const observableArray: Array<Observable<any>> = array_url.map((url) => this.http.get(url));

    // merge all observables into one
    forkJoin(subsArray).subscribe((data: Array<any>) => {

        // process every http response
        data.foreEach((response: any) => {
            const forecasts_pull = response.items[0].forecasts;

            forecasts_pull.forEach((forecast: any) => {
                // push into the row data array
                this.array_rowData.push({
                    date: forecast.date,   
                })
            })
        })

        // after every response is processed, set the rowData
        this.gridApi.setRowData(this.array_rowData)
     }); 
   }

onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
}

从 HTTP GET 请求填充后，数组似乎评估为空

Array appears to evaluate to empty after filling from HTTP GET request

arrays

ag-grid

angular