单元格渲染器组件在垫子选项卡内时移动到 AG 网格之外

Question

我有两个 AG 网格显示数据。它们中的每一个在每一行的末尾都有两个图标，用于修改或取消数据行。它们都在垫子标签内。

<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 网格中添加组件。

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。他们在网格的结束标记之后移动。

在我切换垫子标签之前

切换后

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

谢谢，

祝你今天过得愉快

Answer 1

经过几次测试，似乎用一个<div>包围<ag-grid-angular >就足以消除该错误。

尽管如此，将网格作为<mat-tab>元素的直接子元素可能会导致该错误，这很奇怪。