Angular 角度5+；ag网格-将ag网格与媒体查询结合使用

在大屏幕上，我使用

sizeColumnsToFit（）

将ag网格表调整到整个屏幕，但在移动屏幕大小中，我希望使用

autoSizeColumns（）

，因为

sizeColumnsToFit（）

将使所有列都非常小。因此，是否可以通过媒体查询设置特定的屏幕大小来动态实现这一点？或者有人有其他解决方案吗？

最后，我得到了一个目前运行良好的解决方案。我在

onGridReady（）

中设置了一个条件，用于最初检测屏幕大小的宽度，因此它可以动态启动

autoSizeColumns（）

或

sizeColumnsToFit（）

onGridReady（参数）{
设置超时（（）=>{
this.gridApi=params.api；
this.gridColumnApi=params.columnApi；
const eGridDiv=document.querySelector（“.my grid”）；
常量allColumnIds=[]；
if（eGridDiv.clientWidth
  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>