Question

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

错误错误：选择器“ 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。

renderer2 selectRootElement（）与任何元素都不匹配

1 个答案: