javascript - 重绘事件网格

Question

在我的 Angular 应用程序中，有一个在页面加载时呈现的网格。当我单击一行时，我想重新绘制/重新渲染相同的网格。我这样做是因为单击一行会触发另一个远程数据 GET 请求，以填充网格行内的 div。当然，一旦收到响应，我需要更改网格的行高以显示响应中的所有数据，这就是我需要重新绘制网格的原因。

在我的 html 中:

<ng-template #displayListData>

        <ag-grid-angular #agGrid style="width: 100%" class="ag-material grid-Holdings"
            [gridOptions]="gridOptions"
            [rowData]="rowData"
            [getRowHeight]="getRowHeight"
            headerHeight="46"
            (gridReady)="prepareGrid()"
            [isFullWidthCell]="isFullWidthCell"
            [doesDataFlower]="doesDataFlower"
            [fullWidthCellRendererFramework]="getFullWidthCellRenderer()"
            (rowClicked)="redrawGrid($event)">
        </ag-grid-angular>

</ng-template>

在我的组件中，我有一个方法 redrawGrid()，当我单击一行时该方法会触发。在此方法中，我尝试调用 setRowHeight() 和 resetRowHeight() 但它不起作用...该方法会触发，但网格不会根据传递的新高度重新绘制:

redrawGrid(params: any): void {

    //TRIED BOTH DID NOT WORK
    params.node.setRowHeight(this.newRowHight);
    // this.gridOptions.api.resetRowHeights();
} 

这是同一组件中的 getRowHeight() 方法:

getRowHeight(params) {
        let isDetailRow = params.node.level === 1;
        let rowHeight: number = this.newRowHeight;
        // my new rowHeight or 48px
        return isDetailRow ? rowHeight : 48;
}

我是 ag-Grid 的新手，我想知道我是否使解决方案过于复杂......

Answer 1

经过一些实验，解决方案是在节点的 childFlower 上调用 ag-Grid 的 setRowHeight，如下所示:

redrawGrid(params: any): void {
        params.node.childFlower.setRowHeight(this.globalRowCount * 34);

        this.gridOptions.api.onRowHeightChanged();
}

但是!但是...高度不会改变，网格也不会重绘，除非你调用 onRowHeightChanged()

请参阅“更改行高”:https://www.ag-grid.com/javascript-grid-row-height/#gsc.tab=0