Question

我正在尝试使用Kendo UI创建一个下拉列表，除了在屏幕加载时具有默认的选择值时，它才能正常工作。

根据他们的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属性的解决方案：

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

HTML：

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

COMPONENT：

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

ngModel属性的解决方案：

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

HTML：

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

COMPONENT：

constructor(){
    this.languageValue = 2;
}

Angular 2 - Kendo UI Dropdown默认值

1 个答案: