ag-grid 和 angular，如何动态切换网格选项答案

【问题标题】：ag-grid and angular, how to switch grid options dynamicallyag-grid 和 angular，如何动态切换网格选项
【发布时间】：2019-03-02 07:32:46
【问题描述】：

我有两种不同的网格配置（表示为两个gridOption 对象）。一种是加载本地数据，另一种是使用具有无限行模型的 elasticsearch 数据源。

如果我将它们连接到模板[gridOptions]="localOptions"，[gridOptions]="elasticGridOptions" 两者都可以很好地工作。

这是我当前的组件和（示意性地）我想要实现的目标：

@Component({
  selector: 'app-gridtest',
  styleUrls: ['./gridtest.component.css'],
  template: `
    <ag-grid-angular
      id="grid"
      style="width: 100vw;"
      [style.height] = 'height'
      class="ag-theme-balham ag-grid"
      [columnDefs]="columnDefs"
      [gridOptions]="gridOptions"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
    <button (click)="switchOptions()"></button>
  `
})
export class GridtestComponent implements OnInit{

  constructor(
    private esDs: ElasticDatasource
  ) {}

  height = '0px';
  gridApi: any;
  columnsApi: any;
  gridOptions: {};

  columnDefs = [
    {headerName: 'Id', field: 'id'},
    {headerName: 'Title', field: 'title'}
  ];

  elasticGridOptions = {
    rowModelType: 'infinite'
  };

  localOptions = {
    rowData: [
      {id: '1', title: 'foo'},
      {id: '2', title: 'bar'},
      {id: '3', title: 'baz'}
    ]
  };

  @HostListener('window:resize', ['$event'])
  resizeGrid(){
    this.height = `${$(window).innerHeight()-60}px`;
  }

  ngOnInit(): void {
    this.elasticGridOptions['datasource'] = this.esDs;
  }

  onGridReady(params){
    this.resizeGrid();
    this.gridApi = params.api;
    this.columnsApi = params.columnApi;
  }

  isElastic = false;
  switchOptions(){
    if(this.isElastic){
      this.gridOptions = this.localOptions;
      this.isElastic = false;
    }else{
      this.gridOptions = this.elasticGridOptions;
      this.isElastic = true;
    }

    //reinitialize / update options or grid??
  }

}

我将[gridOptions] 连接到一个通用选项对象，然后单击按钮尝试在两者之间切换。有趣的是，即使我将this.gridOptions = this.localOptions; 作为最后一行放入onGridReady，它也不起作用。我觉得我需要以某种方式告诉网格实际重新加载选项或重新初始化自身，但我在文档中找不到它。

干杯

【问题讨论】：

标签： angular ag-grid ag-grid-ng2

【解决方案1】：

目前，gridOptions 无法动态重新加载。看这里：

Dynamically Setting Properties for ag-Grid

Repopulate ag-grid with data

您需要重新呈现您的页面。无论如何，您可以处理resolver 部分的需求以准备您的options，然后在component 中使用它。

【讨论】：

【解决方案2】：

我创建了分页（比方说）模拟。所以基本上它是一个将 page-size 属性设置为预定义页面大小（对我来说是 100）或最大行大小的函数，因此所有行都可见。

这是我可以在不弯曲网格 API 或刷新页面/组件的情况下获得的最接近的结果

（如果您希望获得更多用户体验反馈，您也可以隐藏分页控件）

  /**
   * this is not real toggle nor ag-grid turning pagination dynamically on/off
   * because ag-grid does not support hot-reload of this grid option
   */
  paginationToggle() {
    this.pagination = !this.pagination;

    if(this.pagination){
      this.gridApi.paginationSetPageSize(Number(this.pageSize));
    }
    else{
      this.gridApi.paginationSetPageSize(Number(this.gridApi.paginationGetRowCount()));
    }
  }

【讨论】：