Angular 10中如何从DOM获取ng-select组件的选中值

可以实现和原生select完全一致的DOM取值逻辑，以下是两种可落地的方案：

方案1：少量改造业务模板，对齐原生select使用习惯（推荐） #

只需要在ng-select的模板声明中增加value属性绑定，即可让QA直接通过.value读取选中值，和原生select操作逻辑完全一致：

<!-- 组件模板中的ng-select代码 -->
<ng-select
  id="test-select-id"
  [items]="optionList"
  [(ngModel)]="selectedVal"
  <!-- 新增这一行绑定，把选中值同步到DOM元素的原生value属性 -->
  [value]="selectedVal"
>
</ng-select>

测试代码可以直接沿用原生select的写法：

const selectVal = document.getElementById('test-select-id').value;

方案2：无需改造业务代码，直接从DOM关联的组件实例取值 #

如果不能修改业务侧的ng-select代码，可以直接通过Angular挂载在DOM上的组件实例读取选中值：

const ngSelectDom = document.getElementById('test-select-id');
// 获取ng-select组件实例，Angular 10版本兼容写法
const ngSelectInstance = ngSelectDom.__ngContext__.find(ctx => ctx?.selectedItems);
// 单选场景取值
const selectVal = ngSelectInstance.selectedItems[0]?.value;
// 多选场景取值（返回所有选中值的数组）
const selectValList = ngSelectInstance.selectedItems.map(item => item.value);

注意事项 #

• 如果ng-select配置了bindValue参数，直接取selectedItems[0]即可拿到绑定的value值，不需要再取.value属性
• 方案2依赖Angular内部的__ngContext__属性，升级Angular大版本前需要验证兼容性

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