Angular响应式表单中动态下拉框的选项过滤问题

问题根源 #

当前实现的availableCities(i)方法会将**所有已选中的城市（包括当前下拉框自身选中的选项）**从可选列表中移除，导致用户选择的选项从自身下拉框中消失。

解决方案 #

1. 修正availableCities方法

修改方法逻辑，仅排除其他字段组已选中的城市，保留当前字段组自己选中的选项：

availableCities(i: number) {
  return this.cities.filter(city => {
    // 仅排除由其他索引选中的城市
    const isSelectedByOtherGroup = Object.entries(this.selectedCities).some(
      ([index, selectedCity]) => index !== i.toString() && selectedCity === city
    );
    return !isSelectedByOtherGroup;
  });
}

2. 修正模板中的方法调用

确保调用availableCities时传入当前字段组的索引，让方法明确需要排除的范围：

<p-dropdown
  placeholder="Select city"
  formControlName="city"
  [options]="availableCities(i)"
  (onChange)="modifySelectedCities($event, i)"
>
  <ng-template let-option pTemplate="item">
    <div>{{ option }}</div>
  </ng-template>
</p-dropdown>

3. 完善字段组移除逻辑

移除字段组时，同步清理selectedCities中对应索引的记录，让被移除组选中的城市恢复可选：

removeFields(i: number) {
  this.fieldsArray.removeAt(i);
  // 删除对应索引的选中记录，恢复城市可选状态
  delete this.selectedCities[i];
}

关键逻辑说明 #

• availableCities方法通过Object.entries遍历选中记录，对比索引判断是否为当前组的选中项，只排除其他组的选择，确保当前组的选中项始终在可选列表中。
• 移除字段组时清理选中记录，避免已删除组的选中城市被错误排除。

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