setColumnDefs не работает в Angular 5

Question

Как и то, что было предложено в другом месте,

setColumnDefs не работает для некоторых ag-сеток

Как инициализировать API ag-grid в приложении angular2

Я уже инициализировал gridOptions в моем конструкторе классов. Но когда я попытался установитьColumnDefs, он все равно дал мне ошибку:

TypeError: Невозможно прочитать свойство 'setColumnDefs' из неопределенного

Что еще мне здесь не хватает?

export class ConfigurationComponent implements OnInit {
  constructor(
    private configurationService: ConfigurationService,
    ) 
    {
      this.gridOptions = {
        enableSorting: false,
        rowData: this.tableData,
        columnDefs: this.tableColumns,
        onGridReady: () => {
          this.gridOptions.api.sizeColumnsToFit();
          this.gridOptions.api.setColumnDefs(this.tableColumns);
          alert(this.gridOptions.api);
        }
      }
    }

  tableData: string[] = [];
  tableList: string[] = [];
  tableName: string;
  tableColumns: [{headerName: string, field: string}] = [{headerName: "", field: ""}];
  tableRecord: {};
  gridOptions: GridOptions;

  ngOnInit() {   
    this.retrieveTableList();
  }

  retrieveTableList(){
    /*blah blah*/
  }

  retrieveTableData(){
    /*blah blah*/
    this.configurationService.retrieveTableData(this.schemaFullname, this.tableName).subscribe(data => {
      /* GETTING tableColumn HERE from the service*/

      this.gridOptions.api.setColumnDefs(this.tableColumns);

    }, error => {
      console.error(error);
      this.alertService.error("Get table data error", "No table data retrieved from data source for " + this.tableName);
    })
  }
}

Answer 1

Как говорится в вашем комментарии,

Теперь это работает после того, как я добавил [gridOptions] = "gridOptions" в html.

Вы знаете, почему это сработало?

Как и в вашем коде, вы определяете gridOptions в своем конструкторе. В вашей функции onGridReady никто не знает, откуда добавляется свойство api (и методы sizeColumnsToFit и т. Д.).

  this.gridOptions = {
    enableSorting: false,
    rowData: this.tableData,
    columnDefs: this.tableColumns,
    onGridReady: () => {
      this.gridOptions.api.sizeColumnsToFit();
      this.gridOptions.api.setColumnDefs(this.tableColumns);
      alert(this.gridOptions.api);
    }
  }

Когда вы добавляете [gridOptions]="gridOptions" в свой компонент, компонент ag-grid использует объект gridOptions и вводит для вас другие apis. Следовательно, это работает потом.