大小的列在可见时适合隐藏的 ag-grid

Question

通常我只是使用 gridReady 事件，获取 api 并调用 sizeColumnsToFit()。

export class MyGridApplicationComponent {
    private gridOptions: GridOptions;
    private showGrid2: false;

    constructor() {
        this.gridOptions = <GridOptions>{
          onGridReady: this.gridReady.bind(),
          ....
        };
    }
    gridReady(params) {
      params.api.sizeColumnsToFit();
    }
    ....

但是，我有一个隐藏选项卡中的网格，因此当调用 gridReady 事件时，宽度为 0（在控制台中获取消息：“尝试调用 sizeColumnsToFit() 但网格以零宽度返回，也许网格在屏幕上还不可见？”）。

<h2>Grid only visible after button click</h2>
<button (click)="showGrid2 = true;">Show grid</button><br/><br/>
<div style="width: 100%;" [hidden]="!showGrid2">

    <ag-grid-angular #agGrid2 style="width: 100%; height: 200px;" class="ag-theme-fresh" [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

当 ag-grid 变得可见时，是否有我可以挂钩的事件，以便我可以调整它的大小/适合它？我已经尝试了一些模糊相关的事件（gridSizeChanged、firstDataRendered、columnVisible、columnResized）但无济于事。

我在 StackBlitz 中有一个简化的 repro。

[编辑] 我尝试修改下面@antirealm 的建议（查看父 div 上的 *ngIf 是否有所不同），这适用于我的（过度）简化版本的问题：参见StackBlitz repro。

这一切都在嵌套选项卡组件的上下文中，其中 ag-grid 不在第一个选项卡上。我试过在包含嵌套选项卡内容的 div 中使用 *ngIf：

<div *ngIf="hasBeenActive" [hidden]="!active"><ng-content></ng-content></div>

即使 DOM 显示 ag-grid 不存在，ag-grid 的 gridReady 事件仍然会在第二个选项卡被选中之前被调用。请参阅Stackblitz 重现。

Answer 1

1. 原始过度简化问题的解决方案：

<div *ngIf="hasBeenShown" style="width: 100%;" [hidden]="!grid2Showing">  
  <ag-grid-angular #agGrid2 style="width: 100%; height: 200px;" class="ag-theme-fresh" [gridOptions]="gridOptions">
  </ag-grid-angular>
</div>

2. 实际问题的解决方案：ag-grid hitting gridReady when projected content (ng-content), in this case in a nested-tab component:

   a）（@antirealm 的解决方案）在嵌套选项卡组件上创建一个公开可用的“hasBeenActive”变量，然后在您的 ag-grid 上直接在 *ngIf 中使用它：

export class NestedTabComponent ... {
  ...
  public hasBeenActive: boolean = false;

  activate() {
    this.active = true;
    this.hasBeenActive = true; 
  }
  ....

<nested-tab title="Second grid" #myTab>
  <div style="width: 100%;">
    <ag-grid-angular *ngIf="myTab.hasBeenActive"
      ...>
    </ag-grid-angular>
  </div>    
</nested-tab>

b) 修改嵌套选项卡组件以使用模板（如果存在），然后将不应立即初始化的任何嵌套选项卡的内容包装在模板中：

@Component({
    selector: 'nested-tab',
    template: `
    <div *ngIf="hasBeenActive" [hidden]="!active">
      <ng-container *ngTemplateOutlet="content"></ng-container>
      <ng-content></ng-content>
    </div>`
})
export class NestedTabComponent implements OnInit {
    @ContentChild(TemplateRef) content;
    ....

<nested-tab title="Second grid">
  <ng-template>
    <p>The Second grid rendered:</p>
    <div style="width: 100%;">      
      <ag-grid-angular ...></ag-grid-angular>
    </div>    
  </ng-template> 
</nested-tab>

Answer 2

我能够使用网格选项属性公开的

onGridSizeChanged

回调来解决这个问题。

首先根据通过选项对象传递的参数化，使用两个调整大小机制设置此函数（此步骤是可选的，可以直接从回调中调用

autoSizeColumns

或

sizeToFit

）：

  private resizeColumns(): void {
    if (this.options.sizeToFit) {
      this.gridApi?.sizeColumnsToFit();
    } else if (this.options.autoSize) {
      const columns =
        this.columnApi?.getAllGridColumns().filter((column) => {
          return column.isVisible();
        }) ?? [];
      this.columnApi?.autoSizeColumns(columns, false);
    }
  }

在组件中之后，我从

resizeColumns

回调中调用

onGridSizeChanged

函数：

const IMPORTS = [CommonModule, AgGridModule];

@Component({
  selector: 'app-my-grid-component',
  templateUrl: './my-grid.component.html',
  styleUrls: ['./my-grid.component.scss'],
  standalone: true,
  imports: IMPORTS,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyGridComponent {
  @Input() options = { 
    autoSize: true,
    sizeToFit: false,
  };

  gridOptions = this.getGridOptions();
  private gridApi: GridApi | null = null;
  private columnApi: ColumnApi | null = null;

  onGridReady(params: GridReadyEvent): void {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
  }

  private getGridOptions(): GridOptions {
    return {
      onGridSizeChanged: (event) => {
        if (event.clientWidth > 0 || event.clientHeight > 0) {
          this.resizeColumns();
        }
      },
    };
  }

  private resizeColumns(): void {
    if (this.options.sizeToFit) {
      this.gridApi?.sizeColumnsToFit();
    } else if (this.options.autoSize) {
      const columns =
        this.columnApi?.getAllGridColumns().filter((column) => {
          return column.isVisible();
        }) ?? [];
      this.columnApi?.autoSizeColumns(columns, false);
    }
  }
}

在 HTML 文件中，需要绑定选项输入：

<ag-grid-angular
  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

希望对您有所帮助！