AngularJS TypeScript Kendo UI DropDownList-选择默认值的错误

Question

I have list of objects for items and everything works fine, but now I want to add default value selected , but I have issues with it.

Here's the HTML code for the drop-down:

<select kendo-drop-down-list 
        k-options="selectItems" 
        k-ng-model="selectedItem">
</select>

And in AngularJS (using TypeScript) I'm making the drop-down:

this.itemsToSelect = [{id: 1, name: "One"}, {id: 2, name: "Two"}];

this.selectItems = {
    optionLabel: "Select items...",
    dataTextField: "name",
    dataValueField: "id",
    dataSource: new kendo.data.DataSource({
      transport: {
        read: (options) => {
          options.success(this.itemsToSelect);
        }
      }
    }),
    value: this.itemsToSelect[0]
  };

I don't have default value selected with this.

I tried the code from their documentation and it works with items as strings, but with items as objects works when I say something like:

value: this.itemsToSelect[0].id

So, their code looks like this:

<script>
    let items = [{id: 1, name: "one"}, {id: 2, name: "two"}];

    $("#dropdownlist").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        dataSource: items,
        value: items[1].id
    });
</script>

I tried this in my code and it doesn't work.

Code doesn't have any errors. Any suggestions?

EDIT

What I can do is this:

this.selectedItem = this.itemsToSelect[0];

I've set k-ng-model in the HTML and I can just set the selected value like this.

But, is there a way to do it through value in this.selectItems object?

Answer 1

Make a local object representing your default value, like

{ 
id: 1,
name: "bob"
}

then on the control set autoBind to false.

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/autobind