Angular 5 + ag-grid - 将 ag-grid 与媒体查询结合使用

Question

在大屏幕上我使用 sizeColumnsToFit() 使 ag-grid table 适合整个屏幕，但是在移动屏幕尺寸下，我想使用 autoSizeColumns() 因为 sizeColumnsToFit() 将使所有列都非常小。因此，是否可以通过媒体查询设置特定的屏幕尺寸来动态实现这一点？或者谁有其他解决方案？

Answer 1

最后，我得到了一个目前运行良好的解决方案。我在 onGridReady() 中设置了一个条件，它最初检测屏幕尺寸的宽度，因此它可以动态启动 autoSizeColumns() 或 sizeColumnsToFit()

  onGridReady(params) {
    setTimeout(() => {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;   
      const eGridDiv = document.querySelector('.my-grid');
      const allColumnIds = [];
      if (eGridDiv.clientWidth <= 768) {
        this.gridColumnApi.getAllColumns().forEach(function(column) {
          allColumnIds.push(column.colId);
        });
        this.gridColumnApi.autoSizeColumns(allColumnIds);
      } else {
        params.api.sizeColumnsToFit();
      }      
    }, 500);
  }

<ag-grid-angular 
style="width: auto; height: 60vh;"
class="ag-theme-balham my-grid"
[rowData]="data" 
[columnDefs]="columns"
[enableColResize]="true"
(gridReady)="onGridReady($event)">
</ag-grid-angular>

Angular 5 + ag-grid - 将 ag-grid 与媒体查询结合使用

Angular 5 + ag-grid - Using ag-grid with media query

ag-grid

angular