ng-select 组件依据JSON加载下拉数据异常的排查求助

问题根因 #

1. async管道与绑定值类型不匹配
   你在HTML中用了| async管道，这个管道只能处理Observable或Promise类型的数据流，但你在TS代码的subscribe回调中，直接把branchModel$赋值成了接口返回的普通数组类型，导致async管道无法正确解析数据。
2. bindValue配置可能有误
   你当前配置了bindValue="title"，如果branchArr数组的子项中没有title字段，会导致值绑定异常，需要替换为实际存在的字段名。
3. 未触发数据加载逻辑
   需确认你是否在组件初始化钩子（如ngOnInit）中调用了loadBranches()方法，未调用的话接口不会请求，自然无数据渲染。

解决方案 #

这里提供两种常用实现方式，二选一即可：

方案1：保留async管道（更推荐，自动处理订阅销毁，避免内存泄漏）

调整TS代码，直接把接口返回的Observable赋值给branchModel$，不需要手动subscribe：

import { map } from 'rxjs/operators';
// 提前声明变量类型，可替换any为你自定义的分支项接口类型
branchModel$: Observable<any[]>; 

loadBranches() {
  this.branchModel$ = this.registrationService.getBranchName().pipe(
    map(data => data['data']['branchArr'])
  );
}

HTML代码无需修改，保持原有[items]="branchModel$ | async"的配置即可。

方案2：去掉async管道，直接绑定普通数组

把绑定的变量改为普通数组类型，不需要用Observable：

// 声明普通数组类型变量，可替换any为你自定义的分支项接口类型
branchList: any[] = [];

loadBranches() {
  this.registrationService.getBranchName().subscribe(data => {
    console.log(data);
    this.branchList = data['data']['branchArr'];
  });
}

调整HTML的items绑定逻辑，移除async管道：

<ng-select [items]="branchList" bindLabel="branchName" required
    (change)="getBankInfo($event);" name="branchName" bindValue="title"
     placeholder="Select Branch" [(ngModel)]="reserve.branchName">
</ng-select>

额外校验建议 #

如果调整后仍有问题，检查branchArr子项的字段是否存在branchName，你配置的bindLabel="branchName"会读取这个字段作为下拉项的展示文本，字段不匹配也会导致下拉项显示为空。

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