Angular 6中DevExpress dxSelectBox自定义Store不显示选中值问题

看起来你遇到的问题是dxSelectBox没法正确显示已选中的值，我帮你分析下原因和解决办法：

核心问题出在绑定值的类型和组件配置不匹配：

• 你给dxSelectBox设置了valueExpr: 'id'，这就告诉组件：我要绑定的是数据源项里的id字段值（也就是数字类型，比如123）。
• 但你的formData里item.person是一个完整的对象{ id: 123, name: 'John' }，组件没法把这个对象和valueExpr指定的id值做匹配，所以就算byKey返回了正确数据，组件也不知道这是对应选中项。

方案1：调整绑定值为id（推荐，更符合组件设计） #

直接把item里的person字段改成对应的id数值，而不是完整对象：

// home.component.ts中修改item的定义
item = { person: 123 }; // 用id值和valueExpr对应

这样组件会自动用这个id调用byKey方法获取对应数据，然后通过displayExpr显示name字段，就能正常显示选中值了。

方案2：保持绑定完整对象（适合业务需求必须绑定对象的场景） #

如果你的业务逻辑需要item.person是完整对象，那需要调整组件配置：

1. 把valueExpr设为null，告诉组件绑定的是整个数据源项对象：

editorOptions = {
  displayExpr: 'name',
  valueExpr: null, // value为整个对象
  dataSource: null
};

2. 给数据源配置key字段，让组件知道怎么识别对象的唯一性：

this.editorOptions.dataSource = new DataSource({
  load: function (loadOptions) {
    // 原加载逻辑不变
    const promise1 = new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log('resolving', vm.items);
        resolve( { data: vm.items } );
      }, 3000);
    });
    return promise1;
  },
  key: 'id', // 指定id作为对象的唯一标识
  byKey: function (key) {
    console.log('Getting Person', key);
    return new Promise((resolve) => {
      setTimeout(() => {
        // 根据key查找对应项，而不是固定返回John
        const target = vm.items.find(item => item.id === Number(key));
        resolve(target);
      }, 3000);
    });
  }
});

这样组件会通过key字段匹配绑定的对象和数据源中的项，就能正确显示选中值了。

你的byKey方法目前固定返回John的数据，实际业务中最好根据传入的key参数动态查找对应项，这样不管选中哪个id，都能返回正确的结果，就像上面方案2里的写法那样。

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