如何防止Kendo MultiSelect在网格模板编辑保存后丢失值？

听起来你遇到的这个问题挺典型的，我来帮你梳理下可能的原因和对应的解决思路：

1. 先排查服务器端的转换逻辑 #

这是最容易出问题的核心环节：

• 保存时，你把MultiSelect的数组值转成逗号分隔字符串的过程是不是出错了？比如有没有不小心只取了数组的第一个元素（比如误用array[0]代替array.join(',')）？
• 重新打开编辑器时，服务器把逗号分隔字符串转回数组的逻辑是否正确？比如有没有把整个字符串当成单个元素塞进数组（漏做了split(',')操作）？

建议在服务器端加个日志，看看保存时接收的数组内容，以及返回给前端的数组内容是否符合预期——比如保存前是["a","b","c"]，转成字符串应该是"a,b,c"，转回数组也得是["a","b","c"]才行。

2. 验证前端绑定变量的更新 #

在AngularJS这边，要确保编辑器模板绑定的数组变量在保存后是正确更新的：

• 保存操作完成后，有没有重新从服务器拉取最新数据，并且正确赋值给MultiSelect绑定的ngModel变量？
• 可以在打开编辑器的函数里加一句console.log()，打印绑定的数组变量，看看它的内容是不是包含所有选中的值，而不是只有一个元素。

比如你的MultiSelect绑定的是vm.selectedValues，那就加：

console.log(vm.selectedValues);

确认它是包含多个元素的数组，而不是单个字符串或者只有一个元素的数组。

3. 检查MultiSelect的配置细节 #

有时候组件配置也会导致这类问题：

• 确认data-value-field和data-text-field是否和你的数组元素类型匹配？如果是字符串数组，这两个字段可以省略（或者设为同一个值）；如果是对象数组，必须指定正确的字段。
• 有没有开启auto-bind？如果设为false，可能需要手动调用dataSource.read()来刷新数据。

给你一个字符串数组对应的简单配置示例：

<select kendo-multi-select
        k-ng-model="vm.selectedValues"
        k-data-source="vm.valuesDataSource"
        k-placeholder="'Select values'">
</select>

4. 排查AngularJS脏检查的问题 #

有时候AngularJS的脏检查没触发，会导致视图不更新：

• 保存完成后，尝试用$timeout或者$scope.$apply()强制触发视图更新，比如：

vm.save = function() {
  // 调用保存接口
  yourSaveApi().then(function(response) {
    // 将返回的逗号分隔字符串转回数组
    vm.selectedValues = response.data.split(',');
    // 强制触发脏检查，更新视图
    $timeout(function() {});
  });
};

先从这几个方向排查，应该能定位到问题。如果还是解决不了，可以把相关的前端模板代码和服务器端转换逻辑贴出来，这样能更精准地帮你分析。

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