ng-select组件ngModel绑定值无法显示选中项的解决方法

问题复现代码 #

<ng-select [items]="items$ | async"
            bindLabel="value"
            minTermLength="2"
            bindValue="id"
            [(ngModel)]="val"
            [typeahead]="valInput$">
</ng-select>

问题现象 #

• 上述组件配置为服务端搜索模式：只有用户输入的检索词长度达到2位时，才会触发请求拉取候选项，因此初始加载阶段items列表为空
• 页面初始化时，ngModel绑定的val变量已经存有有效值，预期组件会直接展示该值对应的选中文本，但实际始终无法渲染出选中状态

排查过程 #

• 最初猜测是初始候选项为空导致组件找不到匹配值，尝试提前把val对应的选项对象推入items$数据流，发现选中状态仍然无法正常展示，说明问题不是初始选项为空导致的
• 最终定位问题根源：组件配置了bindValue="id"属性，该属性会指定组件把选项对象的id字段作为实际绑定值，而非整个选项对象，和当前val存储的值结构不匹配，导致组件无法识别对应选中项

解决方案 #

直接移除bindValue="id"配置项，让组件默认将完整选项对象作为选中值和ngModel做绑定，即可正常展示初始状态下的已绑定选中项。

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