Question

在2个不同的mat-tab中具有2 ag网格，如下所示：

<mat-tab-group fxFlex>
  <mat-tab label="Tab 1">
    <h2>List 1
      <mat-icon (click)="open1()">add_circle_outline</mat-icon>
    </h2>
    <ag-grid-angular [gridOptions]="gridOption1" [rowData]="list1">
    </ag-grid-angular>
  </mat-tab>

  <mat-tab label="Tab 2">
    <h2>List 2
      <mat-icon (click)="open2()">add_circle_outline</mat-icon>
    </h2>
    <ag-grid-angular [gridOptions]="gridOption2" [rowData]="list2">
    </ag-grid-angular>
  </mat-tab>
</mat-tab-group>

当我刚到达屏幕时没问题。但是，当我将标签页切换到标签页时，最后一列出现了问题：图标不再显示。

要显示图标，请执行以下操作：

<ng-template #agGridButtonTemplate1 let-model>
  <button mat-icon-button
          color="primary"
          (click)="update1(model.data.id)">
    <mat-icon>edit</mat-icon>
  </button>
  <button mat-icon-button
          color="primary"
          (click)="openDelete1(model.data.id)">
    <mat-icon>delete</mat-icon>
  </button>
</ng-template>

<ng-template #agGridButtonTemplate2 let-model>
  <button mat-icon-button
          color="primary"
          (click)="update2(model.data.id)">
    <mat-icon>edit</mat-icon>
  </button>
  <button mat-icon-button
          color="primary"
          (click)="openDelete2(model.data.id)">
    <mat-icon>delete</mat-icon>
  </button>
</ng-template>

在我的adGrids中，带有的列图标定义如下

 headerName: Actions,
 cellRendererFramework: NgTemplateCellRendererComponent,
 cellRendererParams: {
 cellTemplateFunction: (params) => {
       return this.agGridButtonTemplate1; //agGridButtonTemplate2 for the 2nd AgGrid
    }
 }

我在构造函数中声明了AgGrid，所以我虽然“当我切换选项卡时再次声明它，可能会解决问题”，所以在Tab更改时，我这样做了：

 public onTabChange(event) {
       this.gridsInitializer();
    }

 private gridsInitializer() {
   this.gridOptionReason = this.createDefaultGridOptions({
      enableSorting: true,
      animateRows: true,
      onGridReady: (params: any) => params.api.sizeColumnsToFit()
    });

    this.gridOption1.columnDefs = [
      {
        headerName: `Header1`,
        field: 'name',
      }       
      ..... //other columns
      {
        headerName: Actions,
        cellRendererFramework: NgTemplateCellRendererComponent,
        cellRendererParams: {
        cellTemplateFunction: (params) => {
             return this.agGridButtonTemplate1;
        }
      }
   }];

在这里我并没有显示所有代码，这只是ag网格的示例定义

带有Angular材质标签的Ag-Grid错误渲染图标

0 个答案: