renderer2 selectRootElement() 不匹配任何元素

Question

我正在创建一个小网页，它需要在 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>

问候

Answer 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 。