AngularJS TypeScript Kendo UI DropDownList默认值选中异常问题

AI 小北

2026-5-29

Kendo UI DropDownList 对象数据源设置默认选中值问题

我在用对象列表作为Kendo UI DropDownList的数据源时，原本功能正常，但设置默认选中值遇到了问题。

下拉框的HTML代码：

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

AngularJS（TypeScript）的配置代码：

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

这段代码没法选中默认值，我试过官方文档里的写法，字符串数据源能正常工作，但对象数据源下用value: this.itemsToSelect[0].id也没用。官方的示例代码是这样的：

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

代码没有报错，有没有解决建议？

编辑补充：我已经通过this.selectedItem = this.itemsToSelect[0];（结合HTML里的k-ng-model）实现了默认选中，但能不能通过this.selectItems对象的value属性来设置呢？

解决建议

其实这个问题的核心是AngularJS整合Kendo UI时，组件初始化和数据源加载的时机问题，还有指令式用法和jQuery原生用法的差异：

为什么直接设置value属性无效？
你用的是kendo-drop-down-list指令，结合AngularJS的k-ng-model，这时候Kendo组件的初始化会和Angular的 digest 周期绑定。而你在selectItems里设置value的时候，数据源是通过transport.read异步返回的（哪怕你是同步返回数据，Kendo的DataSource依然会按异步流程处理），组件初始化时可能数据源还没加载完成，所以value设置不会生效。

能不能通过selectItems的value属性设置？
可以，但需要调整数据源的写法，确保组件初始化时数据源已经就绪，或者手动触发数据源加载后再设置值：

方法一：直接把数组作为数据源，不用transport.read（如果你的数据不需要异步获取的话）：

this.itemsToSelect = [{id: 1, name: "One"}, {id: 2, name: "Two"}]; 
this.selectItems = { 
  optionLabel: "Select items...", 
  dataTextField: "name", 
  dataValueField: "id", 
  dataSource: this.itemsToSelect, // 直接用数组，不包DataSource
  value: this.itemsToSelect[0].id 
};

这种写法和官方的jQuery示例逻辑一致，因为直接传入本地数组，数据源会同步加载，组件初始化时就能找到对应的值。

方法二：如果必须用transport.read，可以在数据源加载完成后手动设置值，或者用dataBound事件：

this.selectItems = { 
  optionLabel: "Select items...", 
  dataTextField: "name", 
  dataValueField: "id", 
  dataSource: new kendo.data.DataSource({ 
    transport: { 
      read: (options) => { 
        options.success(this.itemsToSelect); 
      } 
    } 
  }),
  dataBound: () => {
    // 数据绑定完成后设置值
    const dropdown = $("#your-dropdown-id").data("kendoDropDownList");
    dropdown.value(this.itemsToSelect[0].id);
  }
};

注意这里需要给下拉框加个id，方便获取组件实例。

关于你已经实现的k-ng-model方法
其实这是AngularJS整合Kendo UI时最推荐的方式，因为它符合Angular的数据双向绑定逻辑，不需要手动操作组件实例，也能避开初始化时机的问题。如果没有特殊需求，保持这种写法就很好。

总结一下：如果要通过selectItems的value属性设置，要么把数据源改成直接传入本地数组，要么在dataBound事件里手动设置值。不过用k-ng-model绑定的方式更符合Angular的开发习惯，维护起来也更简单。

内容的提问来源于stack exchange，提问作者user8666203