代码之家 › 专栏 › 技术社区 › monty

当列变为可见时调整其大小以适应隐藏的ag网格

ag-grid angular

monty · 技术社区 · 7 年前

通常我只使用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网格变为可见时,是否有可以挂接的事件,以便我可以调整/调整它的大小?我尝试了一些模糊相关的事件(gridSizeChanged、firstDataRendered、columnVisible、columnResized)但没有成功。

我有一个简单的 repro in StackBlitz .

[编辑]我试图修改@antrealm下面的建议(看看父div上的*ngIf是否起到了作用),这对我(过度)简化的问题有效:参见 StackBlitz repro .

这都在嵌套选项卡组件的上下文中,其中ag网格不在第一个选项卡上。我尝试在包含嵌套选项卡内容的div中使用*ngIf:

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

即使DOM显示ag grid不在那里,ag grid的gridReady事件仍然在选择第二个选项卡之前被调用。见 Stackblitz repro .

1 回复 | 直到 7 年前

monty 7 年前

Solution to original over-simplified problem :

<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>

实际问题的解决方案:ag grid在投影内容(ng内容)时击中gridReady,在这种情况下,在嵌套的tab组件中:

(一)( Solution from @antirealm )在嵌套的tab组件上创建一个公共的hasbeenacactive变量,然后在ag网格上的*ngIf direct中使用它:

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)修改嵌套选项卡组件 to use a template 如果存在,则将任何嵌套选项卡的内容包装在模板中不应立即初始化的内容:

@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>