角度コンポーネントがレンダリングされない

Question

ng2-selectコンポーネントを使用して別のコンポーネントを拡張しています - 私はmy-dropdown-fieldと呼びました。ただし、何らかの理由でng2-selectコンポーネントがレンダリングされません。この問題は、ng2コントロールではなく、私が作成したラッパーコントロールにあるようです。私はしかし、これを引き起こしていることを把握することはできません。いずれかのエラーもスローされません。私がng2-selectを使用している場合は、それ自体が正常です。私は再現可能なスタックブリッツを作りました。

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

これを実行する場合は、レンダリングされているいかなるNG2選択制御はありませんが表示されます。あなたはapp.component.htmlから下の部分をコメントアウトした場合：

は

上から

<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> 

とのコメントを解除これは動作しません：

作品

<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> 

次に、正常に動作することがわかります。私は何をしないのです

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

：ここ

は、元NG2選択コンポーネントへのリンクですか？

Answer 1

あなたはNG2選択のを上書きしているので、あなたのコードは動作しません。プロパティitems。 当初はセッター（https://github.com/valor-software/ng2-select/blob/development/src/select/select.ts#L269）ですので、この行@Input() items: Array<string> = [];は元の動作に変更されています。

このような状況でこの問題を回避するには、このプロパティ（options、objects、など） ここで働いている例ControlValueAccessor` `実装https://stackblitz.com/edit/ng2-select-angular2-tof6ko?file=app/app.component.html

Answer 2

ngModelとリアクティブフォームで動作させる場合は、MyDropdownFieldComponentはControlValueAccessor を実装する必要があります。

[のSelectedItem]配列であるか、またはAppComponentで名前

を変更、ngOnInitでフォームを作成するべきではない代わりに、コンストラクタの