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 。