1

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

我在 angular2 组件中使用用于企业（跟踪版）的 ag-grid。在我的组件中，我有一个带有项目列表的选择下拉列表。在选择一个时，我实际上正在加载其中包含 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
  }
}
4

0 回答 0