Ag-Grid с угловым материалом.

Question

Имейте сетку 2 ag в 2 разных вкладках, например:

<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 в своем конструкторе, поэтому я "когда я переключаю вкладку, я просто объявляю это снова, может я решу проблему", поэтому на вкладке я сделал следующее:

 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