renderer2 selectRootElement() 没有匹配任何元素

【问题标题】：renderer2 selectRootElement() did not match any elementsrenderer2 selectRootElement() 没有匹配任何元素
【发布时间】：2019-11-29 23:45:00
【问题描述】：

我正在创建一个小网页，它需要在 div 中使用动态创建的元素。我想在 .ts 文件中渲染按钮，但我得到了

ERROR 错误：选择器“myDIV”没有匹配任何元素

这是在 .ts 文件中添加简单文本的示例：

  renderButtons(){
    const element = this.renderer.selectRootElement('myDIV');
    const text = this.renderer.createText('something');
    this.renderer.appendChild(element, text); 
  }

.html 文件：

<div id="myDIV"> 

</div>

问候

【问题讨论】：

您是要动态更改组件，还是仅要显示或隐藏它的一个组件
我需要在一页中对5、10、25个元素进行动态分页

标签： javascript html angular

【解决方案1】：

你做错了，在 html 模板中定义你的动态元素，例如

<div id="myDIV"> 
    <button *ngIf="showButton==true">myButton</button>
    <ng-container *ngIf="showText==true">{{ myText }}</ng-container>
</div>

其中myText、showButton 和showText 是在.ts 文件中定义的组件字段。 <ng-container> 放置内容（文本）而不创建html元素（如div/span）

如果要使用多个元素 - 将一个元素定义为单独的组件，并在父组件 html 模板中使用，如下所示

<myElement *ngFor="let item in elementsDataArray" [data]="item"></myElement>

其中elementsDataArray 是在父 .ts 文件中定义的数组，其中包含对象（项目）以及在您的 myElement 组件中使用的数据并绑定到其参数 data。

【讨论】：