时间戳

首页 > 解决方案 > Angular：我应用网格选项后，ag-grid 正在重置

angular - Angular：我应用网格选项后，ag-grid 正在重置

问题描述

感谢这里的某个人，我在我的 agGrid 上设置了一个排序模型，并告诉它自动调整所有列的大小。当我单步调试调试器时，我可以看到更改生效。但是随后，执行了其他操作，并且网格被重置为我猜它的默认状态。那会是什么？

这是 HTML 定义：

<div>
    <br>
    <div class="domain-form-input"></div>
    <h1>Refresh Job Log</h1>
    <br>
    <data-table *ngIf="portfolioData"
                [setData]="portfolioData"
                [columnDefinition]="columnsDefinition"
                [selectable]="selectable"
                [highlight]="highlight"
                (onRowDoubleClick)="onRowDoubleClick($event)"
                [showSearchBar]="false"
                (onCellClick) = "onCellClick($event)"
                (onDataGridReady)="onGridReady($event)"
    >
    </data-table>
</div>

以及 .ts 的片段：

public onGridReady(params): void {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
    const sortModel = [
        {colId: 'refreshJobStart', sort: 'desc'}
    ];
    this.gridApi.setSortModel(sortModel);
    this.columnApi.autoSizeAllColumns();
}

public ngOnInit(): void {
    this.gridOptions.defaultColDef = this.selectable ? this.getDefaultColumnsDefinition() : null;
    this.showSpinner = true;
    this.getAllRefreshJobs();
}

一般来说，我对 UI 开发知之甚少，但我了解事件，但我看不出是什么事件导致我的网格重置。在调试器中，事件队列被“清除”，这就是我的更改被撤消的时候。有任何想法吗？

标签： angulartypescriptag-grid

解决方案

在尝试了我能找到的一切来阻止事件传播（都没有奏效）之后，我终于想出了这个 kluge。我在 grid 上设置了一个属性modifyColumnState，在 ts 的组件中data-grid，如果该属性设置为 false，我告诉它不要做它的事情。希望其他有麻烦的人清楚。

   <data-table *ngIf="portfolioData"
                [setData]="portfolioData"
                [columnDefinition]="columnsDefinition"
                [selectable]="selectable"
                [highlight]="highlight"
                (onRowDoubleClick)="onRowDoubleClick($event)"
                [showSearchBar]="false"
                (onCellClick) = "onCellClick($event)"
                (onDataGridReady)="onGridReady($event)"
                [modifyColumnState] = "false"
    >
    </data-table>

推荐阅读