angular - 如何在 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;