Angular 6 - Renderer2 - [динамический] DOM не создается - SELECT-Option - PullRequest
Новая
       26

Angular 6 - Renderer2 - [динамический] DOM не создается - SELECT-Option

0 голосов
/ 18 марта 2019

я пытаюсь создать опцию выбора динамически, используя Renderer2. В настоящее время я не могу создать элемент <Select></Select>. но я вижу возможность видеть <options> созданы. Из-за некоторых проблем не разрешено делиться всеми фрагментами. извиняется за это.

Проблема в том, что не создает элемент select. это просто показывает первый элемент массива. я мог бы получить все элементы, когда я утешу его в ngOniti()

других консольных ошибок тоже нет.

PFA.

enter image description here

любезно, кто-нибудь, помогите мне в этом и укажите мне правильное направление. Если возможно, поделитесь рабочим демо. потратив так много часов, я нашел это только . 

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

    })

Примечание: пожалуйста, поделитесь любыми другими лучшими решениями, если моё совсем не хорошее.

Огромное спасибо всем.

1 Ответ

0 голосов
/ 18 марта 2019

Пожалуйста, проверьте этот код для ссылки на создание опций выбора в 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);
     }
}

В этом классе я создаю элемент select с Renderer2
, затем добавляю элемент options, которыйсозданный с помощью Renderer2 добавляется к элементу выбора

наконец я добавляю элемент выбора к элементу AppComponent nativeElement

Поток 

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

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

...