Добавление ng-select по нажатию кнопки

Question

Я использую ng2-select в моем шаблоне для выбора элементов, есть кнопка с именем "Добавить", которая при нажатии должна показать другое поле выбора со списком других категорий элементов. Для этого самая простая версия моего кода выглядит так:

@Component({
moduleId: module.id,
selector: 'client-user-detail',
templateUrl: `<div #one> 
              <ng-select #selectRole [allowClear]="true" 
              [multiple]="true" (data)="refreshValue($event)" 
              (selected)="onSelectRole($event)"
              (removed)="removed($event)"
              (typed)="typed($event)"
              placeholder="Choose/Search">
             </ng-select>                                   

            <button [disabled]="isDisable"
                    class="btn btn-default" 
                    (click)="add()"> 
                    <i class=" fa fa-save"></i>
                      Add
            </button>


  `,
  styleUrls: ['clientuserdetail.component.css']
  })

   export class TestComponent {
   @ViewChild('selectRole') public select: SelectComponent;
   @ViewChild('one') d1:ElementRef;

    constructor(
    private renderer: Renderer
    ) { }

   add() {
   let htmlText = `<ng-select #selectRole [allowClear]="true" 
                [multiple]="true" (data)="refreshValue($event)" 
                (selected)="onSelectRole($event)"
                (removed)="removed($event)" (typed)="typed($event)" 
                placeholder="Choose/Search">
                </ng-select>`;

   this.renderer.invokeElementMethod
     (this.d1.nativeElement,'insertAdjacentHTML',
      ['beforeend',htmlText]);

    }

 }

Приведенный выше код не создает поле выбора. Я где-то читал о том, что компонент Resolver может быть полезен в таких обстоятельствах, но я не понял, как его использовать. Если есть кто-нибудь, кто может просто объяснить мне, как решить эту проблему, я буду очень признателен. Мне нужна четкая иллюстрация о том, как компоненты могут динамически добавляться или добавляться в угловых 2. Заранее спасибо.

Answer 1

Я не могу точно ответить, как вы пытаетесь добавить поле, я бы рекомендовал вместо этого поместить ваш ng-select в ngFor, чтобы ваша функция add() увеличивала и удаляла все viewChild.

import { Component } from '@angular/core';
/**
 * Created by lejendarm on 08/08/17.
 */


class Role {
  id: number;
  label: string;

  /* I'm not sure about the need of a constructor */
  constructor() {
    this.id = 0;
    this.label = '';
  }
}

@Component({
  moduleId: module.id,
  selector: 'client-user-detail',
  template: `<div *ngFor="role in roles"> 
              <ng-select [allowClear]="true" 
              [multiple]="true" (data)="refreshValue($event, role)" 
              (selected)="onSelectRole($event, role)"
              (removed)="removed($event, role)"
              (typed)="typed($event, role)"
              placeholder="Choose/Search">
             </ng-select>                                   
            </div>
            <button [disabled]="isDisable"
                    class="btn btn-default" 
                    (click)="add()"> 
                    <i class=" fa fa-save"></i>
                      Add
            </button>`,
  styleUrls: ['clientuserdetail.component.css']
})
export class TestComponent {
  private roles: Array<Role>;

  constructor(
  ) {
    this.roles = [new Role()];
  }

  add() {
    this.roles.push(new Role())
  }

  refreshValue($event, role) {}
  onSelectRole($event, role) {}
  removed($event, role) {}
  typed($event, role) {}
}

PS: даже если нет прямой связи с вашей проблемой, я бы использовал template вместо templateUrl и закрыл div #one, чтобы показать лучший код.