Похоже, что массив заполнен после заполнения из HTTP-запроса GET - PullRequest
Новая
       24

Похоже, что массив заполнен после заполнения из HTTP-запроса GET

0 голосов
/ 24 марта 2020

Я вызываю HTTP GET для API, который возвращает данные о погоде, для отображения в таблице ag-grid. Код ниже: 

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, я обнаружил, что:

непустой массив против видимого пустого массива

I знаю, что одна из проблем может заключаться в том, что когда ag-grid завершает загрузку и оценку, массив, из которого они должны считываться, все еще кажется пустым. Однако выполнение setRowData после await getWeatherData дает тот же результат. Есть ли какое-либо ожидание, чтобы заставить ag-grid ждать, пока массивы не завершат sh оценку? У меня такое ощущение, что это как-то связано с тем, как я выбрал получение данных.

Ценю любой совет, который вы, ребята, можете дать!

1 Ответ

1 голос
/ 24 марта 2020

Ag-grid не может знать об изменениях массива. Вам нужно реорганизовать свой код, поэтому вы будете звонить setRowData() после того, как все HTTP запросы будут выполнены. Вот пример, как вы могли это сделать. 

...
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;
}
...