Angular动态select复用方法致数据重置，能否为方法添加索引？

问题本质是你用了全局的subCategoryList和typeList变量，所有动态生成的下拉框都绑定同一个数组，当新增条目并选择选项时，全局数组被覆盖，导致原有条目的下拉选项跟着变化，看起来像是选择被重置。通过给方法添加索引区分每个动态条目，完全可以解决这个问题，具体实现步骤如下：

1. 重构TS变量，为每个文档条目维护独立的选项列表 #

把全局的单个列表变量改成数组，对应每个documents数组中的条目：

// 替换原来的subCategoryList和typeList
subCategoryLists: any[][] = [];
typeLists: any[][] = [];

同时在新增文档的initDocument方法中，初始化对应索引的空列表：

initDocument() {
  const docGroup = this.fb.group({
    documentId: [''],
    name: [''],
    documentFields: this.fb.array([
      this.fb.group({ key: 'category', value: '' }),
      this.fb.group({ key: 'subCategory', value: '' }),
      this.fb.group({ key: 'type', value: '' })
    ])
  });
  this.documents.push(docGroup);
  // 为新条目初始化空的子类别和类型列表
  this.subCategoryLists.push([]);
  this.typeLists.push([]);
}

2. 修改模板，传递条目索引并绑定对应列表 #

在下拉框的(change)事件中传入当前文档的索引comIndex，同时把下拉选项绑定到对应索引的列表：

<!-- Category下拉框 -->
<select id="" class="form-select" formControlName="value" (change)="changeCategoryList($event, comIndex)">
  <option selected>Select</option>
  <option *ngFor="let c of categoryList">
    {{c.name}}
  </option>
</select>

<!-- Sub-Category下拉框 -->
<select id="" class="form-select" formControlName="value" (change)="changeSubCategoryList($event, comIndex)">
  <option selected>Select</option>
  <option *ngFor="let s of subCategoryLists[comIndex] || []">{{s.name}}</option>
</select>

<!-- List下拉框 -->
<select id="" class="form-select" formControlName="value">
  <option selected>Select</option>
  <option *ngFor="let name of typeLists[comIndex] || []">{{name}}</option>
</select>

3. 更新change方法，根据索引操作对应列表 #

修改changeCategoryList和changeSubCategoryList方法，通过传入的comIndex定位到当前条目对应的列表：

changeCategoryList(category: any, comIndex: number) {
  const selectedCategory = this.categoryList.find(
    (cat: any) => cat.name == category.target.value
  );
  if (selectedCategory) {
    this.subCategoryLists[comIndex] = selectedCategory.subCategoryList;
    // 切换类别时重置对应类型列表
    this.typeLists[comIndex] = [];
  }
}

changeSubCategoryList(subList: any, comIndex: number) {
  // 获取当前条目选中的类别值
  const docGroup = this.documents.at(comIndex) as FormGroup;
  const fieldsArray = docGroup.get('documentFields') as FormArray;
  const categoryValue = (fieldsArray.at(0) as FormGroup).get('value')?.value;

  const selectedCategory = this.categoryList.find(cat => cat.name === categoryValue);
  if (selectedCategory) {
    const selectedSubCat = selectedCategory.subCategoryList.find(stat => stat.name === subList.target.value);
    if (selectedSubCat) {
      this.typeLists[comIndex] = selectedSubCat.typeList;
    }
  }
}

为什么这样能解决问题 #

每个动态生成的文档条目都有自己独立的subCategoryLists[comIndex]和typeLists[comIndex]列表，操作某个条目下拉框时只会更新对应索引的列表，不会影响其他条目，彻底解决了原有选择被重置的问题。

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