0

我正在尝试使用 Renderer2 动态创建选择选项。目前无法创建<Select></Select>元素。但我可以看到能够看到<options>被创建。由于某些问题，不允许分享所有片段。对此表示歉意。

问题是：因为它没有创建选择元素。它只是简单地显示数组的第一个元素。当我控制台它时，我可以获得所有元素ngOniti()

也没有其他控制台错误。

粉煤灰。

在此处输入图像描述

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

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

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

谢谢大家！谢谢。

4

1 回答 1

0

请检查此代码以供您在 stackblitz 中创建选择选项时参考

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

在这个类中，我正在创建一个选择元素，Renderer2
然后将创建的选项元素Renderer2附加到选择元素

最后我将选择元素附加到 AppComponent nativeElement

流动 

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

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

于 2019-03-18T10:27:02.277 回答