Angular 5 + ag-grid - 将 ag-grid 与媒体查询一起使用答案

【问题标题】：Angular 5 + ag-grid - Using ag-grid with media queryAngular 5 + ag-grid - 将 ag-grid 与媒体查询一起使用
【发布时间】：2018-12-11 15:21:24
【问题描述】：

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

【问题讨论】：

标签： angular ag-grid

【解决方案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>

【讨论】：