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

问题描述

我有两个显示数据的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',suppressMenu: true}
]

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

Before I switch mat tabs

After the switch

有人对发生的事情有什么想法，或者我该如何解决？

谢谢

祝你有美好的一天

解决方法

经过几次测试，看来用单个

包围足以消除该错误。
不过，将网格作为元素的直接子元素可能会导致该错误。

ag-grid-angular angular angular mat-table