Angular中ng-select遍历数组渲染ng-option仅显示第一条结果

• ng-option缺失必填的[value]绑定是首要原因。ng-select组件内部默认带值去重逻辑，多选模式下如果不给选项显式绑定唯一的value值，所有选项会被识别为同一个重复值，最终仅渲染第一条数据，其余选项会被内部过滤逻辑丢弃。
• 模板取值逻辑存在隐患：当前插值写死取result.medications.items[0].name，即使选项正常渲染，每个选项也仅能展示对应条目下药品数组的第一个药品名称，无法展示完整数据；如果某条数据的items为空数组，还会触发模板报错，中断后续选项的渲染。
• 次要可能诱因：selected数组更新时未触发Angular变更检测，比如直接通过索引修改数组项、调用数组原生push/pop方法后未返回新数组引用，不过这类问题通常会导致所有数据都不渲染，和仅渲染第一条的表现匹配度较低。

1. 补全ng-option的唯一值绑定
   给每个循环生成的选项绑定可唯一区分条目的value值（通常用数据id这类唯一标识），修复基础渲染问题，参考代码：

<ng-select [multiple]="true" [(ngModel)]="choosenResults">
  <ng-option *ngFor="let result of selected" [value]="result.uniqueId">
    <!-- 移除写死的[0]索引，按需拼接要展示的药品名称 -->
    {{ result.medications.items.map(med => med.name).join('、') }}
  </ng-option>
</ng-select>

2. 优化选项显示逻辑
   如果不想在模板内写数组拼接逻辑，可在组件侧提前给selected数组的每一项新增专门用于显示的字段（比如displayText），再通过ng-select自带的bindLabel属性直接绑定显示字段，简化模板代码：

<ng-select [multiple]="true" bindLabel="displayText" [(ngModel)]="choosenResults">
  <ng-option *ngFor="let result of selected" [value]="result.uniqueId"></ng-option>
</ng-select>

3. 数据有效性校验
   在*ngFor循环前加断点打印selected数组，确认数组长度和预期选项数量一致，同时校验每个条目的medications.items数组不为空，避免空值报错中断渲染。
4. 自定义配置排查
   如果补全value后问题仍存在，检查ng-select上是否配置了自定义compareWith比较函数、全局过滤管道，确认这类逻辑没有错误过滤非首条数据。

参考控制台打印的数组结构截图：

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