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

Question

我正在尝试使用 Renderer2 动态创建 select 选项。目前无法创建 <Select></Select> 元素。但我可以看到 <options> 已创建。由于一些顾虑，我不允许分享所有片段。对此深表歉意。

问题是：因为它没有创建 select 元素。它只是简单地显示数组的第一个元素。当我在 ngOniti()

中控制它时，我可以获得所有元素

也没有其他控制台错误。

心理急救。

请有人帮助我并指出正确的方向。如果可能，请分享工作演示。花了这么多小时后，我发现了这个 only .

    arr= ["AAA", "BBB", "CCC", "DDD", "EEE"];
    const select = this._rend.createElement('select');
  select.name = name;
  var option = this._rend.createElement('option');      
    this._rend.appendChild(select, option);
    this._rend.appendChild(option, document.createTextNode(''));
  
    arr.forEach( aaaa=>{ 
        option = this._rend.createElement('option');        
        this._rend.appendChild(option, document.createTextNode(aaaa));
        if (aaaa === value)
          option.selected = true;
            this._rend.appendChild(select, option);
        
    })

注意：如果我的解决方案不是很好，请分享任何其他更好的解决方案。

非常感谢大家。

Answer 1

请检查此代码以供您在 stackblitz

中创建 select 选项时参考

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);
     }
}

在这个 class 中，我正在创建一个 select 元素 Renderer2
然后将使用 Renderer2 创建的选项元素附加到 select 元素

最后，我将 select 元素附加到 AppComponent nativeElement

流量

 Created `select
 |
 V
 Appended `Option` to select
 |
 V
 Appended `select` to the AppComponent host element

https://stackblitz.com/edit/angular-wpstnh

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

Angular 6 - Renderer2 - [dynamic] DOM not getting created - SELECT-Option

javascript

typescript

angular

angular-renderer2