Angular 2 getElementById 内联 div答案

【问题标题】：Angular 2 getElementById innered divAngular 2 getElementById 内联 div
【发布时间】：2018-04-20 18:58:17
【问题描述】：

我想问一下是否可以通过javascript的getElementById函数获得内嵌的div。

this.treeContent = this.treeContent +
          '<div id="tree' + htmlData.Id +
          '" class="col-md-12">' + htmlData.Label + '</div>';

          document.getElementById('tree' + htmlData.Id).innerHTML = '<button type="button" id="button' + htmlData.Id +
          '"  value="' + htmlData.Id + '">'
           + htmlData.Label + '</button>';

当我尝试这样的代码时，无法设置 null 错误的属性“innerHTML”。提前感谢您的所有回复。

【问题讨论】：

为什么要在控制器中而不是在模板中执行此操作？

标签： javascript html angular innerhtml getelementbyid

【解决方案1】：

您收到 Cannot set property 'innerHTML' of null 错误，因为您尝试调用 document.getElementById 并且您想要获取的元素还不是 DOM 的一部分。

【讨论】：

我在 html 模板中使用 angular [innerHTML]，所以在更改 treeContent 变量元素后会自动添加。

【解决方案2】：

尝试像这样绑定到树内容：

<div innerHtml="{{treeContent}}"></div>

顺便说一句，你应该尽量在你的 JS 文件中保留尽可能多的 HTML。见https://angular.io/guide/displaying-data。

【讨论】：

没有变化。是的，你是对的，但我想可视化树结构数据，由于某些原因，我不能为此使用库。元素数量动态变化，因此我无法手动创建 html 模板。