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

Posted 2023-03-28

【中文标题】与 Angular 材质选项卡一起使用时，Ag-Grid Cell Render 无法正确显示按钮

【英文标题】：Ag-Grid Cell Render don't display buttons correctly when used with Angular material tab

【发布时间】：2021-03-01 01:31:52

【问题描述】：

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

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

您可以检查stackblitz 上的行为。

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

【参考方案1】：

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

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

不要问我为什么... ;-)

【参考方案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 结构。