setColumnDefs 在 Angular 5 中不起作用答案

【问题标题】：setColumnDefs does not work in Angular 5setColumnDefs 在 Angular 5 中不起作用
【发布时间】：2018-05-08 01:54:47
【问题描述】：

正如其他地方所建议的那样，

setColumnDefs is not working for some ag-grids

How to initialize ag-grid api in angular2 application

我已经在我的类构造函数中初始化了 gridOptions。但是当我尝试 setColumnDefs 时，它仍然给了我错误：

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

【问题讨论】：

我在 html 中添加 [gridOptions]="gridOptions" 后现在可以使用了。

标签： javascript angular ag-grid

【解决方案1】：

正如你的评论所说，

在我在 html 中添加 [gridOptions]="gridOptions" 后它现在可以工作了。

你知道它为什么起作用吗？

与您的代码一样，您在构造函数中定义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。因此，它在之后起作用。

【讨论】：

感谢您的解释。