Как динамически отображать столбец в соответствии с откликом API с использованием ag-grid

Question

Ниже приведен код для сетки ag и ошибка ее получения для "this.gridApi.setColumnDefs (this.columnDefs)". Кто-нибудь может подсказать, как решить эту проблему:

<ag-grid-angular " 
class="ag-theme-balham"
#agGrid
[columnDefs]="columnDefs"
id="newGrid"
[enableSorting]="true"
[enableFilter]="true"
[modules]="modules"
[paginationAutoPageSize]="true"
[rowData]="rowData"
[defaultColDef]="defaultColDef"
(gridReady)="onGridReady($event)"
[pagination]="true">>
</ag-grid-angular>

Вызываю этот метод в GreadReady (), а также ngOnit, но с ошибкой «this.gridApi.setColumnDefs (this.columnDefs)». На самом деле this.gridAPI становится неопределенным. и отображение ошибки в консоли = "Не удается прочитать свойство 'setColumnDefs' из неопределенного"

public getcolumnData()


      {
        let columnDefs=[];
        this.GetGridData();
        let header:any =[];
        Object.keys(this.JSONDATA).forEach(function(key) {
          header.push(key)
        }); 

         console.log("header.........",header)
          columnDefs=[...columnDefs,{headerName:header,field: header  }];

      });
      this.gridApi.setColumnDefs(this.columnDefs)
  }

Answer 1

gridApi для ag-grid доступно только после события onGridReady. Более подробную информацию о том, как вы можете получить экземпляр gridApi, можно найти почти на каждом примере ag-grid.

Ссылка: Пример определения столбца

Теперь, что быть сделано.

• В этом случае вам не нужно явно вызывать gridApi.setColumnDefs. Во время итерации данных столбца, полученных от сервера, просто вставьте sh их внутри columnDefs компонента. В вашем шаблоне вы уже передали массив columnDefs в ag-grid.

    this.columnDefs = [];
    this.columnDefs.push({
      headerName: header, field: header
      // ... other details
    });