Angular 2 - Kendo UI Dropdown默认值

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]因为它只会复制该项目,这意味着它将在下拉列表中2次.

我尝试了很多东西,但我无法弄清楚我应该做些什么!

提前致谢

Answer 1

你应该选择value和ngModel绑定.来自文档:

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

value物业解决方案:

1. ngModel从HTML中删除.
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. value从HTML中删除.
2. 在模型中设置默认值.

HTML:

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

零件:

constructor(){
    this.languageValue = 2;
}