PROSAGA码农传奇-Angular-Angular 6 - Renderer2 - [动态]未创建DOM

<div class =“post-text”itemprop =“text”>
  
    请查看此代码，以获取有关在stackblitz中创建选择选项的参考
  
   <pre>
 <code>
 class AppComponent {
 arr = ["AAA", "BBB", "CCC", "DDD", "EEE"];
 value = 'BBB'

constructor(private el: ElementRef, private renderer: Renderer2) {
       const select = renderer.createElement('select');
       select.name = name;
       var option = renderer.createElement('option');
       renderer.appendChild(select, option);
       renderer.appendChild(option, document.createTextNode(''));

this.arr.forEach(aaaa => {
         option = renderer.createElement('option');
         renderer.appendChild(option, document.createTextNode(aaaa));
         if (aaaa === this.value) option.selected = true;
         renderer.appendChild(select, option);

})
       renderer.appendChild(this.el.nativeElement, select);
     }
}

</code>
 </pre>
  
    在这个类中，我正在创建一个select元素
     <code>
 Renderer2
 </code>
     
    
然后附加使用创建的选项元素
     <code>
 Renderer2
 </code>
     被附加到select元素
  
  
    最后我将select元素附加到AppComponent nativeElement
  
  
    流
  
   <pre>
 <code>
 Created `select
 |
 V
 Appended `Option` to select
 |
 V
 Appended `select` to the AppComponent host element

</code>
 </pre>
  
    <a href="https://stackblitz.com/edit/angular-wpstnh" rel="nofollow noreferrer">
      https://stackblitz.com/edit/angular-wpstnh
    </A>
  
</DIV>

Angular 6 - Renderer2 - [动态]未创建DOM - SELECT-Option