追加ng選擇按鈕點擊

Question

我正在使用ng2選擇在我的模板選擇項目，有一個按鈕名爲「添加」，當點擊應顯示另一個選擇字段與其他類別的項目列表。爲此，我的代碼的最簡單版本如下所示：

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

    } 

} 

上述代碼不會創建選擇字段。 我讀過關於組件的解析器在這種情況下可以使用，但我沒有明確的方法來使用它。如果有人能夠簡單地向我解釋如何解決這個問題，我將非常感激。我需要一個關於如何動態添加或附加角度2組件的清晰說明。預先感謝您。

Answer 1

我不能確切地與您試圖添加字段的方式回答，我會建議，而不是把你NG-選擇的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：就算是你的問題沒有直接的聯繫，我會用模板代替templateUrl和關閉的div #one表現出更好的代碼。