Размер столбцов для размещения на скрытой сетке, когда становится видимым

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 .

[РЕДАКТИРОВАТЬ] Я попытался изменить приведенное ниже предложение @ antirealm (посмотрев, изменил ли * ngIf на родительском div), и это сработало для моей (более) упрощенной версии проблемы: см. StackBlitzрепро .

Это все в контексте компонента вложенных вкладок, где ag-grid находится не на первой вкладке.Я попытался использовать * ngIf в div, содержащем содержимое вложенной вкладки:

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

, и хотя DOM показывает, что ag-grid не существует, событие gridReady ag-grid по-прежнему вызывается раньшевторая вкладка была выбрана.См. Stackblitz repro .

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>

Решения актуальной проблемы: ag-grid попадает в gridReady при проецируемом контенте (ng-content), в данном случае в компоненте с вложенными вкладками:

a) ( Решение от @antirealm ) Создайте общедоступную переменную hasBeenActive в компоненте вложенных вкладок, а затем используйте ее в * ngIf direct в вашей сетке ag:

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>