与 Angular material 选项卡一起使用时，Ag-Grid Cell Render 无法正确显示按钮

Question

我刚开始在我的一个项目中使用 ag-grid，我创建了一个单元格渲染器来在我的“操作”列中显示按钮，如下所示：

一切正常，但在我将网格移动到 Angular material 内部后，我观察到一个奇怪的行为。如果您导航到第二个选项卡然后返回。按钮被推出 table:

您可以在 stackblitz 上查看行为。

欢迎任何帮助或想法。谢谢！

Answer 1

奇怪...栏目内容放在DOM中完全不同的位置。但是如果你在 ag-grid 周围放一个 div 就可以了：

<mat-tab label="First">
  <div>
    <ag-grid-angular ...></ag-grid-angular>
  </div>
</mat-tab>

别问我为什么...;-)

Answer 2

我在阅读material tab documentation时找到了解决方案：

<mat-tab label="First">
   <ng-template matTabContent>
    <ag-grid-angular ...></ag-grid-angular>
   </ng-template>
  </div>
</mat-tab>

您可以将选项卡内容包装在“ng-template matTabContent”中。这将仅在选项卡处于活动状态时为此选项卡注入 html 结构。

Ag-Grid Cell Render don't display buttons correctly when used with Angular material tab