我将我的网格放在Angular 2组件中 . 在网格组件构造函数中，我调用两个返回columnDefinition和rowData的函数，这些返回值放在变量中 . 然后我使用变量设置gridOptions：

this.gridOptions.columnDefs = this.columnDefinitions;
    this.gridOptions.rowData = this.rowData;

我的网格上方有一个按钮，它调用一个函数来计算新的rowData和相应的columnDefinition . 我使用新的rowData和columnDefinition设置变量，然后按如下方式更新网格：

// Set the column definition.
this.columnDefinitions =  this.gridService.getAllGroupColumnDefinitionsByHour(this.startDate, this.finishDate);

// Set the row data.
this.rowData = this.taskDataService.getTaskGridDataByHour(this.startDate, this.finishDate);

this.gridOptions.api.setRowData(this.rowData);
this.gridOptions.api.setColumnDefs(this.columnDefinitions);
this.gridOptions.api.refreshView();

但是，我的网格会保留一些原始列并添加新列 . 我的第一个图像显示应用程序加载时的网格：

Initial grid

这是替换rowData和columnDefinition后的网格：

Replaced rowData and columnDefinition.

这是完整的GridComponent类代码：

export class GridComponent {

private gridOptions: GridOptions;
private columnDefinitions = [];
private defaultColumnDefinitions = {};
private rowData = [];
private startDate: Date = new Date(2017, 3, 1);
private finishDate: Date = new Date(2017, 3, 12);

constructor( private taskDataService: TaskDataService, private gridService: GridService ) {

    // Initialise the grid.
    this.initialiseGrid();
}

initialiseGrid() {

    this.gridOptions = {};

    // Set default options.
    this.gridOptions.headerHeight = 24;
    this.gridOptions.showToolPanel = false;

    // Get the initial default column definitions.
    this.defaultColumnDefinitions = this.gridService.getDefaultColumnDefinition();

    // Get the initial column definitions.
    this.columnDefinitions = this.gridService.getAllGroupColumnDefinitionsByDay(this.startDate, this.finishDate);

    // Get the initial row data.
    this.rowData = this.taskDataService.getTaskGridDataByDay(this.startDate, this.finishDate);

    // Set the gridOptions properties.
    this.gridOptions.columnDefs = this.columnDefinitions;
    this.gridOptions.defaultColDef = this.defaultColumnDefinitions;
    this.gridOptions.rowData = this.rowData;
}

zoomHour() {
    //alert("zoom hour");

    // Set the column definition.
    this.columnDefinitions = this.gridService.getAllGroupColumnDefinitionsByHour(this.startDate, this.finishDate);

    // Set the row data.
    this.rowData = this.taskDataService.getTaskGridDataByHour(this.startDate, this.finishDate);

    // Set the column width.
    this.gridOptions.defaultColDef.width = 32;

    this.updateGrid();
}

zoomDay() {
    //alert("zoom day");

    // Set the column definition.
    this.columnDefinitions = this.gridService.getAllGroupColumnDefinitionsByDay(this.startDate, this.finishDate);

    // Set the row data.
    this.rowData = this.taskDataService.getTaskGridDataByDay(this.startDate, this.finishDate);

    // Set the column width.
    this.gridOptions.defaultColDef.width = 32;

    this.updateGrid();

}

updateGrid() {

    // Set the gridOptions properties.
    this.gridOptions.api.setRowData([]);
    this.gridOptions.api.setColumnDefs([]);
    this.gridOptions.api.refreshView();

    this.gridOptions.api.setRowData(this.rowData);
    this.gridOptions.api.setColumnDefs(this.columnDefinitions);
    this.gridOptions.api.refreshView();

}
}

有人可以提供任何指导来防止这种情况吗？

angular ag-grid