Angular 2 - Kendo UI Dropdown 默认值

Question

我正在尝试使用 Kendo UI 创建一个下拉列表，除了在屏幕加载时有一个默认的 selected 值之外，它工作得很好。

根据他们的documentation，我的代码应该是这样的：

HTML：

<kendo-dropdownlist formControlName="description"
                    [data]="definitionData.Languages"
                    [(ngModel)]="languageValue"
                    [textField]="'Value'"
                    [valueField]="'Key'"
                    [value]="2"
                    [valuePrimitive]="true">
</kendo-dropdownlist>
<span class="left col-xs-6">
    <input type="text" id="descriptionField" class="form-control" [value]="getValue(descriptionForm.controls.description.value)" #descriptionField (blur)="updateDescriptionValue(descriptionField.value, languageValue)" />
</span>

组件：

public descriptionForm: FormGroup = new FormGroup({
    description: new FormControl()
});

我的下拉菜单有效，但加载页面时默认选择的值为空白，它应该是带有Key: 2的对象

注意：我不想使用[defaultItem]，因为它只会复制该项目，这意味着它将在下拉列表中出现 2 次。

我尝试了很多东西，但我不知道我应该做什么！

提前致谢

Answer 1

您应该在value 和ngModel 绑定之间进行选择。来自documentation：

DropDownList 不支持同时使用value 属性和ngModel 值绑定。

value 属性的解决方案：

1. 从 HTML 中删除 ngModel。
2. 绑定到valueChange 事件并在模型中设置值。

HTML：

<kendo-dropdownlist formControlName="description"
                [data]="definitionData.Languages"
                (valueChange)="handleValue($event)"
                [textField]="'Value'"
                [valueField]="'Key'"
                [value]="2"
                [valuePrimitive]="true">
</kendo-dropdownlist>

组件：

handleValue(value) {
    this.languageValue = value;
}

ngModel 属性的解决方案：

1. 从 HTML 中删除 value。
2. 在模型中设置默认值。

HTML：

<kendo-dropdownlist formControlName="description"
                [data]="definitionData.Languages"
                [(ngModel)]="languageValue"
                [textField]="'Value'"
                [valueField]="'Key'"
                [valuePrimitive]="true">
</kendo-dropdownlist>

组件：

constructor(){
    this.languageValue = 2;
}