Angular封装可复用ng-select组件时无法正常显示默认初始值的解决方法

问题根源 #

封装过程中值同步链路未打通，或是未适配ng-select本身的选中值匹配规则，是导致默认值无法正常渲染的核心原因。

具体调整要点 #

• 适配值匹配逻辑：ng-select默认通过对象引用判断选中状态，如果传入的初始值是和选项字段结构一致、但无对象引用关系的独立实例，就会出现匹配失败、无法渲染的问题。可通过给内部ng-select配置compareWith属性，显式定义两个值的相等判断规则；也可在赋值默认值时，直接从已加载的选项源中匹配对应条目赋值，不要手动构造相同结构的对象作为默认值。
• 补全表单对接逻辑：如果封装组件时实现了ControlValueAccessor接口对接Angular表单体系，一定要在writeValue方法被父组件触发传入初始值时，将该值直接同步到内部绑定ng-select的模型变量上。常见的封装疏漏是只实现了值往外抛的变更流程，遗漏了接收父组件传入初始值的同步分支，导致内部ng-select根本收不到需要展示的当前值。
• 调整异步时序：如果选项列表是异步加载的接口数据，且初始值赋值操作早于选项列表加载完成的时间点，ng-select会因为找不到对应选项条目，无法把原始值渲染成可读的选中标签。可调整赋值时机，等选项列表完全加载后再设置初始值；也可在选项列表更新完成后，手动触发一次ng-select的选中匹配检测。
• 打通双向绑定通路：封装时需要给内部ng-select的输入绑定属性接上内部维护的当前值变量，不要只绑定值变更的输出事件，否则内部ng-select无法获取到当前绑定值，自然无法渲染初始选中状态。

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