Ag-Grid Устанавливает данные столбца и строки динамически

Question

У меня есть класс TypeScript, где я вызываю метод, который вызывает внутренний API, чтобы получить данные с сервера и поместить их в сетку. На данный момент у меня есть жестко запрограммированные столбцы и строки, чтобы проверить, как я это сделаю. Когда я помещаю код установки столбца и строки, как в примере ниже, я правильно заполняю сетку.

export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions: GridOptions;
  private data: any;

  constructor(private http:HttpClient ) { 
    this.getFoo();

this.gridOptions = <GridOptions>{};
          this.gridOptions.columnDefs = [
            {headerName: 'Make', field: 'make' },
            {headerName: 'Model', field: 'model' },
            {headerName: 'Price', field: 'price'}
          ];
          this.gridOptions.rowData = [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxter', price: 72000 }
          ];
  }

  getFoo(){
    this.http.get(`https://xxx`).subscribe(response => {
      this.data = response;
    }, error => {
      console.log(error);
    });
  }

Но когда я помещаю код установки столбца и строки в метод getFoo, где я хочуэто, данные моей сетки не устанавливаются, и я получаю окно загрузки.

export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions: GridOptions;
  private data: any;

  constructor(private http:HttpClient ) { 
    this.getFoo();
  }

  getFoo(){
    this.http.get(`https://xxx`).subscribe(response => {
      this.data = response;

      this.gridOptions = <GridOptions>{};
          this.gridOptions.columnDefs = [
            {headerName: 'Make', field: 'make' },
            {headerName: 'Model', field: 'model' },
            {headerName: 'Price', field: 'price'}
          ];
          this.gridOptions.rowData = [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxter', price: 72000 }
          ];
    }, error => {
      console.log(error);
    });
  }

Я попытался решить эту проблему, возвращая обещание из getFoo, а затем установив данные столбца и строки в «then» изобещание, но получил тот же ящик для загрузки.

Вот моя разметка.

<ag-grid-angular 
    style="width: 700px; height: 500px;" 
    class="ag-theme-balham"
    [gridOptions]="gridOptions"
    >
</ag-grid-angular>

Есть идеи?

Answer 1

Вы можете сделать это следующим образом:

  export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions$: Observable<GridOptions>;

  constructor(private http:HttpClient ) { 
 }
 ngOnInit() { this.getFoo(); } // call it here, not in constructor

 getFoo(){ 
   this.gridOptions$ = this.http.get(`https://xxx`);
 }

Вы можете преобразовать запрос http, выполнив .map для него и применив свою бизнес-логику, и этот ответ будет видимым.

После этого просто в html позвоните так:

<ag-grid-angular 
style="width: 700px; height: 500px;" 
class="ag-theme-balham"
[gridOptions]="gridOptions$ | async"
>

Это будет асинхронно обновлять модель и запускать обнаружение изменений для вас.