Angular mat-table - 单元格中的 HTML 元素

Question

我不知道这是否可能，但也许有人可以帮助我..

我有一个包含许多列的 MAT-TABLE（Angular 材料）（我构建了一个 MatTableDataSource，一切都是动态的）

我想在其中一个专栏中输入我从其他应用程序获得的信息：

• 如果信息不为空，我只是在列中显示为字符串（这个没问题）
• 如果信息为空，我想在我的单元格中放置一个选择元素

所以我在 TS 文件中执行以下操作：

• if (information not null) => data = [...,attribut:information,...]

• 如果（信息为空）=> 数据 = [...，属性：<select><option>test</option></select> ,...]

但它在我的应用程序中显示为字符串，而不是 HTML 元素 我该如何继续？

我想做什么，但更容易解释：

public test: any;
this.test = `<select><option>opt1</option><option>opt2</option></select>`;

在模板中：

<div>
  {{test}}
</div>

但这是我的结果： result

如何在我的 TS 文件中构建一个 HTML 元素，然后在我的 html 文件中显示它？谢谢

Answer 1

使用此 HTML 标记创建一个组件并将该组件动态附加到容器中。

访问https://angular.io/guide/dynamic-component-loader了解更多详情。

如果不将其创建为组件，它将无法用作选择 HTML 标记。