Ag-Grid с угловым материалом Вкладки ошибок рендеринга иконок - PullRequest
Новая
       18

Ag-Grid с угловым материалом Вкладки ошибок рендеринга иконок

0 голосов
/ 27 сентября 2018

Имейте сетку 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 столбецзначок withs определите такэто: 

 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

...