Anhängen ng-select auf Schaltfläche klicken

Question

Ich verwende ng2-select in meiner Vorlage zum Auswählen der Elemente, gibt es eine Schaltfläche mit dem Namen "Hinzufügen", die beim Klicken sollte ein anderes Auswahlfeld mit einer Liste anderer Kategorien von Elementen anzeigen. Dazu sieht die einfachste Version meines Codes wie folgt aus:

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

    } 

} 

Der obige Code erstellt kein Auswahlfeld. Ich las irgendwo über Komponente Resolver kann in solchen Umständen nützlich sein, aber ich habe nicht klar verstanden, wie man es benutzt. Wenn es jemanden gibt, der mir einfach erklären kann, wie dieses Problem gelöst werden kann, werde ich sehr dankbar sein. Ich brauche eine klare Illustration darüber, wie die Komponenten in Winkel 2 dynamisch hinzugefügt oder angehängt werden können. Vielen Dank im Voraus.

Answer 1

ich nicht in der Lage bin genau mit der Art und Weise beantworten Sie ein Feld hinzufügen möchten, würde ich empfehlen, stattdessen Ihre ng-select innerhalb eines ngFor, dass Ihr Add zu setzen() Funktion würde Inkrement und entfernen Sie alle 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: Auch wenn es keine direkte Verbindung mit Ihrem Problem ist, würde ich Vorlage statt templateUrl verwenden und die div #ONE schließt einen besseren Code zu erhalten.