在单击按钮时附加 ng-select

Question

我在我的模板中使用 ng2-select 来 selecting 项目，有一个名为 "Add" 的按钮，点击它应该会显示另一个 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]);

    }

 }

以上代码没有创建 select 字段。我在某处读到有关组件解析器在这种情况下很有用的信息，但我没有掌握使用它的明确方法。如果有人能简单地解释一下如何解决这个问题，我将不胜感激。我需要一个关于如何在 angular 2 中动态添加或附加组件的清晰说明。提前谢谢你。

Answer 1

我无法准确回答您尝试添加字段的方式，我建议您将 ng-select 放在ngFor 您的 add() 函数将 increment 并删除所有 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：即使您的问题没有直接 link，我也会使用 template 而不是 templateUrl 并关闭 div #one 以显示更好的代码。

在单击按钮时附加 ng-select

Appending ng-select on button click

angular-ngselect

angular2-forms

angular2-template

angular