Angular 2 - Kendo UI下拉框的默认值

Question

我正试图使用Kendo UI创建一个下拉列表，它工作得很好，但加载屏幕时默认没有选定任何值。

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

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]，因为它只会复制该项，这意味着它将在下拉列表中出现两次。

我尝试了很多方法，但是我无法弄清楚我应该做什么！

提前感谢。

- Nicolas

---

为什么要同时使用 ngModel 和 value？确保 value 是 data 元素的一部分。 - Konrad Kahl

@KonradKahl 因为我的表单需要是响应式的，根据文档，它们使用 value 来设置默认选定的值（我希望它是 Key = 2 的项目，也恰好是数组中的第二个项目）。 - Nicolas

Answer 1

你应该在value绑定和ngModel绑定之间做出选择。根据文档的说明：

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

- Jarosław Kończak