单元格渲染器组件在垫选项卡内时移出 AG 网格

Question

我有两个 AG-grid 显示数据。他们每个人在每一行的末尾都有两个图标，用于修改或抑制数据行。它们每个都在垫片内。

<mat-tab-group>
    <mat-tab label="Adresses">
      <div class="col d-flex justify-content-end py-3"><button class="btn btn-major" *ngIf="modify" (click)="showCreateAdresseDialog()">CRÉER</button></div>
      <ag-grid-angular
        style="height: 600px"
        class="ag-theme-alpine"
        [rowData]="rowData"
        [gridOptions]="gridOptions"
        suppressCellSelection="true"
        [paginationAutoPageSize]="true"
        [pagination]="true"
        [frameworkComponents]="frameworkComponents"
        [overlayLoadingTemplate]="overlayLoadingTemplate"
        [overlayNoRowsTemplate]="overlayNoRowsTemplate"
        (gridReady)="onGridReady($event)">
      </ag-grid-angular>
    </mat-tab>

    <mat-tab label="Rôles">
      <div class="col d-flex justify-content-end py-3"><button class="btn btn-major" (click)="showCreateRoleDialog()" *ngIf="modify">CRÉER</button></div>
      <ag-grid-angular
        style="height: 600px"
        class="ag-theme-alpine"
        [rowData]="rolesRowData"
        [columnDefs]="columns"
        [gridOptions]="rolesGridOptions"
        suppressCellSelection="true"
        [paginationAutoPageSize]="true"
        [pagination]="true"
        [frameworkComponents]="frameworkComponents"
        [overlayLoadingTemplate]="overlayLoadingTemplate"
        [overlayNoRowsTemplate]="overlayNoRolesRowsTemplate"
        (gridReady)="onRolesGridReady($event)">
      </ag-grid-angular>
    </mat-tab>
  </mat-tab-group>

在下面，您可以看到我是如何在 AG-grid 中添加组件的。

frameworkComponents = {
    modifierButtonRenderer: ActeurModifierAdresseButtonRendererComponent,
    // Other components
};

  gridOptions = {
context: {
  parentComponent: this
},
defaultColDef: {
  sortable: true,
  filter: true,
  suppressMovable: true
},
columnDefs: [
  { /* some data columns */ },
  {cellRenderer: 'modifierButtonRenderer', pinned: 'right', width: 50, suppressMenu: true},
  {cellRenderer: 'supprimerButtonRenderer', pinned: 'right', width: 50, suppressMenu: true}
]

现在，每个按钮都呈现在 AG 网格内。但是，如果切换到第二个 mat-tab，然后返回到第一个，则每个 cellRenderer 都会移到网格之外。不仅仅是 CSS 改变了元素的位置。他们刚好在网格的结束标记之后移动。

Before I switch mat tabs

After the switch

有没有人知道发生了什么，或者我该如何解决这个问题？

谢谢，

祝你有愉快的一天

Answer 1

经过几次测试，似乎在周围加上一个

足以消除该错误。

不过，将网格作为元素的直接子元素可能会导致该错误，这很奇怪。

单元格渲染器组件在垫选项卡内时移出 AG 网格

Cell renderer component moving outside of an AG-grid when it is inside a mat tab

angular

mat-table

ag-grid-angular