Question

通常我只使用gridReady事件，获取api并调用sizeColumnsToFit（）。

read.csv(text = gsub("^[^(]+\\(|\\)$", "", lines), header=FALSE, 
          col.names = c("lat", "lon"))
#    lat       lon
#1 42.25235 -71.07521
#2 42.33234 -71.24659
#3 42.33595 -71.10766
#4 42.09707 -71.06565
#5 42.46550 -71.12141

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

lines <- readLines("file.txt")

当ag-grid可见时是否有一个事件可以挂接到我，以便我可以调整大小/调整它的大小？我尝试了一些模糊的相关事件（gridSizeChanged，firstDataRendered，columnVisible，columnResized）都无济于事。

我有一个简化的repro in StackBlitz。

[编辑]我尝试了下面@antirealm的建议的修改（看看父div上的* ngIf是否有所作为），这对于我的（过度）简化版本有效：请参见StackBlitz repro。

这全部是在嵌套选项卡组件的上下文中进行的，其中ag-grid不在第一个选项卡上。我尝试在包含嵌套标签内容的div中使用* ngIf：

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

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

即使DOM显示不存在ag-grid，在选择第二个选项卡之前仍会调用ag-grid的gridReady事件。参见Stackblitz repro。

Answer 1

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>

实际问题的解决方案：投影内容（ng-content）（在这种情况下，在嵌套选项卡组件中）时，ag-grid会击中gridReady：

a）（Solution from @antirealm）在nested-tab组件上公开可用的'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）修改嵌套标签组件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>

调整列的大小以使其在可见时适合隐藏的农业网格

1 个答案: