ボタンクリック時にng-selectを追加する

Question

テンプレートを選択する際にテンプレートにng2-selectを使用しています。「Add」という名前のボタンがあり、クリックすると他のカテゴリの項目のリストが表示されます。これについては、私のコードの最も単純なバージョンは次のようになります：

@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フィールドを作成しません。 コンポーネントについてどこかに読んでいます。このような状況では、Resolverは役に立ちますが、私はそれを使用する明確な方法を理解していませんでした。この問題の解決方法を簡単に説明できる人がいたら、私はとても感謝しています。アンギュラ2にコンポーネントを動的に追加または追加する方法についての明確な図が必要です。事前にありがとうございます。私はあなたがフィールドを追加しようとしている方法で正確にお答えすることはできませんよ

Answer 1

、私はあなたのアドオン（）関数はうngForの内側にあなたのNG-選択を置くことを代わりに推薦しますを増やして、すべてを削除してください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を閉じます。