Eckige Komponente nicht Rendering

Question

Ich verwende die ng2-select Komponente, um eine andere Komponente zu erweitern - ich nannte es my-dropdown-field. Die ng2-select Komponente wird jedoch aus irgendeinem Grund nicht wiedergegeben. Das Problem scheint nicht im Steuerelement ng2 zu liegen, sondern im Wrapper-Steuerelement, das ich erstellt habe. Ich bin jedoch nicht in der Lage herauszufinden, was das verursacht. Es werden auch keine Fehler ausgegeben. Wenn ich ng2-select auf seinem eigenen benutze, funktioniert es gut. Ich habe einen reproduzierbaren Stapelblitz erstellt.

https://stackblitz.com/edit/ng2-select-angular2

Wenn Sie dies ausführen, werden Sie sehen, gibt es keine NG2-Auswahlsteuer gemacht zu werden. Wenn Sie den folgenden Abschnitt aus der app.component.html Kommentar aus:

Funktioniert nicht

<form [formGroup]="myGroup" (submit)="showForm()"> 
    <my-dropdown-field 
    name="country" 
    [items]="items" 
    [selectedItem]="active" 
    formControlName="country"> 
    </my-dropdown-field> 
    <button (click)="showForm()">Show</button> 
</form> 

und uncomment diese von oben:

Works

<form [formGroup]="myGroup" (submit)="showForm()"> 
    <ng-select 
    name="country" 
    [(ngModel)]="active" 
    [(active)]="active" 
    [items]="items" 
    formControlName="country"> 
    </ng-select> 
    <button (click)="showForm()">Show</button> 
</form> 

Dann werden Sie sehen, dass es gut funktioniert. Hier

ist der Link zu der ursprünglichen NG2-select-Komponente:

https://github.com/valor-software/ng2-select

Was bin ich?

Answer 1

Ihr Code funktioniert nicht, weil Sie NG2-select die sind überschreiben Eigenschaft items. Ursprünglich ist es ein Setter (https://github.com/valor-software/ng2-select/blob/development/src/select/select.ts#L269), also ändert diese Linie @Input() items: Array<string> = []; das ursprüngliche Verhalten.

Eine Abhilfe in dieser Situation ist anderer Name für diese Eigenschaft zu verwenden (options, objects usw.) Hier funktioniert Beispiel https://stackblitz.com/edit/ng2-select-angular2-tof6ko?file=app/app.component.html

Answer 2

MyDropdownFieldComponent sollte implementieren, wenn Sie möchten, dass es mit ngModel und reaktiven Formen funktioniert.

[selectedItem] sollte kein Array sein oder den Namen

Auf AppComponent, erstellen Sie das Formular in ngOnInit anstelle des Konstruktor ändern