如何在Angular 2中渲染动态创建的div

Question

我正在创建一个div，并希望将其内容呈现为其组件的html

component.ts档案

div = document.createElement('div');

component.html档案

<div [innerHtml]='div'></div>

并显示[object HTMLDivElement]而不是div内容。

有没有办法正确渲染它？

版本：Angular 2.3

这里是plunker

Answer 1

您所看到的是将div元素转换为String类型的结果，当您写入innerHTML属性时需要将其作为字符串。

作为innerHtml属性，您希望编写div的内容，而不是HTMLDivElement本身。这样的事情会起作用：

const div = document.createElement('div')
div.innerHTML = '<h3>Hello there</h3>'

this.div = div.outerHTML;

Answer 2

在代码中创建并使用 ngIf 。 如果条件为真，则 div将显示。