Angular表格嵌套*ngFor的ng-select选中值同步异常求助

核心问题分析 #

你遇到的所有下拉框同步选中的问题，主要由三个原因导致：

1. ngModel绑定逻辑错误：直接把[(ngModel)]绑定到遍历项label.LIB_VALEUR[index]，同时bindValue="index"的设置会让所有下拉框的选中值关联到natures数组中对应索引的项，一旦某个下拉框选中，所有绑定同一索引的下拉框都会同步。
2. DOM元素ID重复：所有ng-select的id="index"，DOM要求ID唯一，重复ID会导致浏览器无法正确区分元素，引发意外同步行为。
3. 绑定属性与数据源不匹配：如果natures数组的结构不是包含index和val属性的对象，bindValue="index"和bindLabel="val"会失效，导致选中逻辑混乱。

具体修复步骤 #

1. 调整数据结构，给每个下拉框分配独立的选中值存储

在组件的初始化逻辑中，为natureSaisie的每一项添加独立的选中值数组，避免共享引用：

// 组件TS文件中初始化数据
this.natureSaisie.forEach(label => {
  // 为每个label创建对应长度的空数组，存储对应下拉框的选中值
  label.selectedValues = new Array(label.LIB_VALEUR.length).fill(null);
});

2. 修正模板中的绑定与ID设置

把ngModel绑定到新创建的selectedValues数组，同时生成唯一ID，调整bindValue和bindLabel匹配你的natures数据源结构：

<ng-container *ngFor="let label of natureSaisie; index as i">
  <tr>
    <td>{{label.NO_DPTG}}</td>
    <td class="text-align">{{label.LIB_DPTG}}</td>
    <td *ngFor="let val of label.LIB_VALEUR; let index = index;">
      <ng-select 
        notFoundText="{{ 'lg_liste_vide' | translatePipe }}" 
        class="selector-metier"
        [searchable]="false" 
        [(ngModel)]="label.selectedValues[index]" 
        id="select-{{i}}-{{index}}" <!-- 生成唯一ID -->
        [items]="natures" 
        [clearable]="false"
        bindValue="value" <!-- 替换成natures数组中作为值的属性名，比如你的数据是字符串数组就用"." -->
        bindLabel="label" <!-- 替换成natures数组中作为显示文本的属性名，字符串数组用"." -->
        (change)="selectMetier($event, label.NO_DPTG)"
      >
      </ng-select>
    </td>           
  </tr>
</ng-container>

3. 额外检查点

• 确认natureSaisie中的LIB_VALEUR数组不是共享引用（比如不要多个label指向同一个数组），否则修改一个会影响其他项。
• 检查selectMetier方法，确保内部逻辑没有修改到共享的数据源，导致所有下拉框同步变化。

内容的提问来源于stack exchange，提问作者Siwar Hadj Ali