angular 其他列動態隱藏/顯示時自動調整AG Grid行高

Question

我正在使用 AG-Grid 版本： 21.2.1 ，由於某些原因我無法升級我的版本。

我想包裝單元格內容，以便所有內容都可見，這是我實現的。 我有按鈕來隱藏/顯示應用程序中的列。

問題是當我隱藏列時，行的高度不會根據其他列進行調整。

如果另一列被隱藏/動態顯示，我們應該如何激活網格自動調整內容？

我已經在這個Stackblitz中模擬了這個問題。

點擊remove按鈕，觀察行高保持不變，而不是根據其他列的內容調整

來自 stackblitz 的示例代碼

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  gridApi;
  gridColumnApi;
  defaultColDef = {
    width: 170,
    sortable: true,
    editable: true,
    resizable: true,
    filter: true,
  };
  columnDefs = [
    {
      field: 'make',
      wrap: true,
      autoHeight: true,
      width: 300,
      minWidth: 300,
      hide: false,
      cellStyle: {
        wordBreak: 'break-all',
        whiteSpace: 'normal',
      },
    },
    { field: 'model', wrap: true, autoHeight: true },
    { field: 'price', wrap: true, autoHeight: true },
  ];

  rowData = [
    {
      make: 'Toyota ToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyota',
      model:
        'CelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelica',
      price: 35000,
    },
    {
      make: 'FordFordFordFordFordFordFordFordFordFordFordFord',
      model: 'Mondeo',
      price: 32000,
    },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
  showColumn() {
    this.gridColumnApi.setColumnsVisible(['make'], true);
  }
  hideColumn() {
    this.gridColumnApi.setColumnsVisible(['make'], false);
  }
}

Answer 1

漂亮而簡單； 在您的顯示/隱藏中，添加this.gridApi.resetRowHeights(); .