Угловое 2 - значение Кендо UI Dropdown по умолчанию

Question

Я пытаюсь создать DropDownList с помощью Кендо 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() 
}); 

Мои выпадающие работает, но значение по умолчанию выбрано пусто, когда я загружаю страницу, и это должен быть объект with Key: 2

примечание: я не хочу использовать [defaultItem], так как он просто дублирует элемент, то есть он будет в выпадающем списке 2 раза.

Я пробовал много вещей, но я не могу понять, что я должен делать!

Заранее спасибо

Answer 1

Вы должны выбрать между value и ngModel связывания. От documentation:

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