Question

我正在使用ng2-select组件扩展另一个组件 - 我称之为my-dropdown-field。但是ng2-select组件由于某种原因无法呈现。问题似乎不在ng2控件中，而是在我创建的包装器控件中。然而，我无法弄清楚导致这种情况的原因。也没有抛出错误。如果我使用ng2-select，那么它的工作正常。我创建了一个可重现的stackblitz。

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

如果你运行它，你会发现没有渲染的ng2-select控件。如果您从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>

然后你会发现它运作得很好。

以下是原始ng2-select组件的链接：

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

我错过了什么？

Answer 1

您的代码无法正常工作，因为您正在覆盖ng2-select的属性items。最初它是一个二传手（https://github.com/valor-software/ng2-select/blob/development/src/select/select.ts#L269）所以这一行@Input() items: Array<string> = [];正在改变原有的行为。

此情况下的解决方法是为此属性使用不同的名称（options，objects等）这是[{3}}

的工作示例

Answer 2

MyDropdownFieldComponent应该实现ControlValueAccessor 如果你想要它适用于ngModel和反应形式。

[selectedItem]不应该是数组或更改名称

在AppComponent上，在ngOnInit中创建表单而不是构造函数

角度组件未呈现

2 个答案: