Angular动态表格操作

在构建现代Web应用时，我们经常会遇到需要在表格中动态添加操作按钮的情况。特别是使用Angular框架时，如何优雅地将这些操作按钮作为mat-cell的子元素添加是一个常见的挑战。本文将以一个实际的例子来说明如何通过Renderer2和动态组件创建来实现这一目标，同时确保Angular的指令和组件正常工作。

背景介绍

我们有一个使用Material表格（mat-table）的场景，其中包含一个名为actions的列。这个列的目的是展示与每行数据相关的操作按钮，例如编辑和删除。

初始尝试

首先，尝试使用_viewContainerRef来创建并添加操作组件，但发现它总是将操作按钮添加到mat-cell之外，而不是作为其子元素。

let componentRef: ComponentRef = this.