Question

[首先，我尝试在stackoveflow上搜索以及在aggrid成员支持论坛上搜索。对于我的问题，找不到任何相关的匹配。所以在这里张贴]

我在angular2组件中使用ag-grid for enterprise（trail version）。在我的组件中，我有一个选择下拉列表/项目列表。选择一个我实际上正在加载其中包含ag-grid的组件。现在，问题是，在选择另一个选项时，ag-grid不会再次初始化。因此，我得到了不受欢迎的行为。下面是我的sudo代码。如果有更好的选择，请告诉我。我希望有一种方法可以使用生命周期钩子。

// parent.component.ts

import..

@Component({
  selector: 'card',
  template: '
        ....
      <select [(ngModel)]="value" (change)="somethingToDo()">
      <option *ngFor="let f of foo" [value]="f.id">{{f.value}}</option>
      </select>
      .....

      <div *ngIf="value > 0">
      <my-grid-component  [optionValue]="value"></my-grid-component>
        </div>
      ....
      ...
      '
})

// my-grid.component.ts

import ..

@Component({
    selector: 'my-grid-component',
    template: '
    ....
    <ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-fresh"
            [gridOptions]="gridOptions"
            (modelUpdated)="onModelUpdated()"
            (selectionChanged)="onSelectRow($event)">
  </ag-grid-angular>
.....
'
})
export class MyGridComponent implements onInit, onChanges {
  gridOptions;
  optionValue;

  constructor() {
    gridOptions = {};
  }

  ngOnChanges() {
    if(optionValue>0) {
      this.doSomething();
    }
  }

  doSomething() {
    // I have to initialise the grid with new data and coldef.
    this.gridOptions.enableFilter = true;
    this.gridOptions.enableFilter = true;
    this.gridOptions.enableSorting = true;
    this.gridOptions.animateRows = true;
    this.gridOptions.floatingFilter = true;
    this.gridOptions.rowSelection = 'multiple';
  ....
    this.gripOptions.api.setRowData( this.getDataForValue(this.optionValue));
    this.gripOptions.api.setColumnDefs( this.getColDefsForValue(this.optionValue));
  ....
  }

  getDataForValue(inputValue) {
    // Server call
  }

  getColDefsForValue(inputValue) {
    // Server call
  }
}

如何在Angular2中重新初始化ag-grid

0 个答案: