ag-grid и angular, как динамически переключать параметры сетки

У меня есть две разные конфигурации сетки (представленные двумя 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, это тоже не сработает. У меня такое чувство, что мне нужно как-то сказать сетке, чтобы она действительно перезагрузила параметры или переинициализировала себя, но я не смог найти этого в документации.

Ваше здоровье


person Tom    schedule 26.09.2018    source источник


Ответы (1)


В настоящее время gridOptions нельзя перезагружать динамически. Проверить здесь:

Динамическая настройка свойств для ag-Grid

Заново заполнить ag-grid данными

Вам необходимо повторно отобразить вашу страницу. В любом случае, вы можете выполнить требования в resolver части, чтобы подготовить свой options, а затем использовать его в component.

person un.spike    schedule 26.09.2018