以反应形式过滤动态下拉菜单的选项选择

Question

我有一个表单和一个动态添加字段组的规定，最初它显示一个字段组，然后添加或 X 它将添加和删除组

表单本身包含一个下拉列表，我当前遇到的情况是，当我选择或取消选择选项时，是否应该反映在添加的同级下拉列表中以及删除时..所选选项不应再可用于其他下拉菜单，当删除或更改时，它应该再次可用......

我正在跟踪选定的选项，索引为：

selectedCities = {};

和 onChange 下拉菜单

modifySelectedCities(val, i) { this.selectedCities[i] = val.value; }

我当前面临的问题是，当使用选项本身进行选择时，下拉列表将会消失，因为它不再出现在选项中，下面是我迄今为止尝试过的代码

availableCities(i) {
    console.log('sc', this.selectedCities);
    const av = this.cities
      .map((city) => {
        if (!Object.values(this.selectedCities).includes(city)) {
          return city;
        } else {
          null;
        }
      })
      .filter(Boolean);
    console.log('av', av);
    return av;
  }

---

<div class="card flex justify-content-center">
  <form [formGroup]="myForm">
    <div formArrayName="fieldsArray" class="form-group-container">
      <div
        *ngFor="let fieldGroup of fieldsArray.controls; let i=index"
        [formGroupName]="i"
        class="form-group-city"
      >
        <p-dropdown
          placeholder="Select city"
          formControlName="city"
          [options]="availableCities()"
          (onChange)="modifySelectedCities($event, i); availableCities(i)"
        >
          <ng-template let-option pTemplate="item">
            <div>{{ option }}</div>
          </ng-template>
        </p-dropdown>
        <i
          class="pi pi-times"
          (click)="removeFields(i)"
          style="font-size: 1.5rem; cursor: pointer; margin-left: 10px"
        ></i>
      </div>
    </div>
    <div style="margin-top: 20px">
      <button pButton type="button" label="Add" (click)="addFields()"></button>
    </div>
  </form>
</div>

我想不出如何完成这项工作，我希望我正在尝试的事情很清楚

在此 Stackblitz 链接中附上完整的重现，非常感谢任何帮助，谢谢

Answer 1

我用可能的解决方案创建了分叉 STACKBLITZ。

几点：

• 不要对

  options

  属性使用函数，因为它将在每个更改检测周期调用，而是在需要时更新它（初始状态、添加组、删除组）
• 管理可用城市的字典，将其用于新组并在需要时更新（初始状态、添加组、删除组）
• 为按钮添加禁用状态，因此当没有可用城市或用户下拉列表为空（尚未选择任何城市）时，它将被禁用

我添加了重新计算功能：

recalculateOptions() {
  console.log('WITHIN', this.options.length);
  this.options.forEach((_, ind) => {
    this.options[ind] = [
      ...Object.keys(this.availableCities),
      ...(this.selectedCities[ind] ? [this.selectedCities[ind]] : []),
    ].sort();
  });
  this.addDisabled =
    !Object.keys(this.availableCities).length ||
    this.fieldsArray.length !== this.selectedCities.length;
}