ng-select绑定嵌套对象下拉选项显示[object Object]问题

下拉显示[object Object]是两个配置和数据不匹配导致的：

• 传给[items]的数据源不对：你绑定的selected数组存的是上层选中对象，数组元素不是直接要展示的药物实体，每个元素里嵌套的medications字段才是药物对象
• bindLabel配置错误：你写的medications.items路径和实际数据结构不符，ng-select找不到对应的文本字段，就会直接把对象转成默认字符串[object Object]，且ng-select默认不支持通过点语法读取嵌套属性作为展示文本

1. 调整TS侧数据处理 #

单独整理出扁平的药物列表作为下拉数据源，不要直接复用上层选中的selected数组：

// 组件类里先声明下拉数据源属性
medicationList: Array<{id: string|number, name: string}> = [];
serviceUsersMedication: string|number;

onSelect({selected}) {
  this.selected = selected;
  // 过滤出有效药物，拍平成纯药物对象数组
  this.medicationList = selected
    .filter(item => Boolean(item.medications))
    .map(item => item.medications);
  
  // 按需设置默认选中值，比如默认选第一个
  // this.serviceUsersMedication = this.medicationList[0]?.id;
}

2. 修正ng-select组件配置 #

把数据源绑定到拍平后的药物列表，bindLabel换成药物对象上实际存名称的字段（比如药物名称字段是name就填name，如果是genericName之类的就替换成你实际的字段名）：

<ng-select 
  [searchable]="false"
  bindValue="id"
  bindLabel="name"
  [items]="medicationList"
  [(ngModel)]="serviceUsersMedication">
</ng-select>

如果不想提前拍平数据，也可以直接用自定义选项模板渲染嵌套字段，不用配置bindLabel：

<ng-select 
  [searchable]="false"
  bindValue="id"
  [items]="selected"
  [(ngModel)]="serviceUsersMedication">
  <ng-option *ngFor="let userItem of selected" [value]="userItem.medications.id">
    {{userItem.medications.name}} <!-- 这里换成你实际要展示的名称字段 -->
  </ng-option>
</ng-select>

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