각형 구성 요소가 렌더링되지 않음

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. 원래 setter (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에서 양식을 작성해서는 안