Question

我对ag-grid有问题，我在控制台中收到此警告，我做了一些研究，但没有一个能解决我的问题，而且我不知道我的代码出了什么问题，原因在于我知道是我的应用程序中的内存泄漏，但我不明白。

ag-Grid：试图调用sizeColumnsToFit（），但是网格返回的宽度为零，也许网格在屏幕上还不可见？

请

如果您有一个解决方法，或者如果我的代码有问题，我将非常感谢即使是最小的帮助。

我尝试过的事情：

@HostListener('window:resize')
onResize() {
  if (!this.gridApi) return;

  setTimeout(() => {
    this.gridApi.sizeColumnsToFit();
  });
}

这一个：

 afterGridReady() {
    if (this.language === 'en') {
      this.appgrid.columnApi.setColumnsVisible(['name'], true);
      this.appgrid.columnApi.setColumnsVisible(['nameCZ'], false);
    } else {
      this.appgrid.columnApi.setColumnsVisible(['nameCZ'], true);
      this.appgrid.columnApi.setColumnsVisible(['name'], false);
    }
    this.api.sizeColumnsToFit();
    window.addEventListener('resize', function () {
      setTimeout(function () {
        this.api.sizeColumnsToFit();
      });
    });
  }

谢谢。

Answer 1

您可以使用提供的selectChange事件。更改选项卡选择时触发。从文档中：

@Output（）selectChange：选项卡选择具有时发出的事件改变了。

在您的模板中：

<md-tab-group (selectChange)="tabSelectionChanged($event)">
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">
    This tab will load some morecontents after 5 seconds.
    <p>{{ moreContents }}</p>
  </md-tab>
</md-tab-group>
... and in your typescript code:

tabSelectionChanged(event){
    // Get the selected tab
    let selectedTab = event.tab;
    console.log(selectedTab);

    // Call some method that you want 
    this.someMethod();
}

Answer 2

this is working code.

//component.html

 <mat-tab-group (selectedTabChange)="selectedTabChange($event)">
            <mat-tab label="Letter Template">
                 <div class="ag-grid-full-height">
                     <ag-grid-angular style="width: 100%;height:100%" id="myGrid" class="ag-theme-balham"
                        [pagination]="true" [columnDefs]="columnDefs" [rowData]="rowData" [animateRows]="true"
                        [sideBar]="sideBar" (gridReady)="onGridReady($event)" [suppressMenuHide]="true">
                    </ag-grid-angular>
                </div>
            </mat-tab>

            <mat-tab label="Template Gallery">
                <app-template-gallery *ngIf="seletedTab"></app-template-gallery>
            </mat-tab>

            <!-- //if you have more than 2 tabs use bellow approch. -->
            
            <!-- <mat-tab label="Template Gallery">
                <app-template-gallery *ngIf="seletedTab =='Template Gallery'"></app-template-gallery>
            </mat-tab> -->
            <!-- <mat-tab label="Template FRT">
                <app-template-gallery *ngIf="seletedTab=='Template FRT'"></app-template-gallery>
            </mat-tab> -->

        </mat-tab-group>
        
        
   //component.ts     
   seletedTab;

  selectedTabChange(event) {
    let tab = event.tab;
    console.log("tab seleted", tab);
    this.seletedTab = tab.textLabel;
  }

angular-在两个单独的ag-Grid上使用ag-Grid的sizeColumnsToFit（）时，警告“网格零宽度”吗？

2 个答案: