根据其他下拉选择动态显示下拉元素

Question

我有 3 个字段可以添加 3 个电话号码。每个字段都有一个下拉菜单可以选择电话号码类型（即传真、家庭、手机）。 当我在 dropdown1 中选择一个选项（例如 Home）时，下一个或两个下拉菜单不应在其中显示“Home”，依此类推。 PS我所有的下拉菜单都是动态创建的，因此我不能为所有三个下拉菜单拥有不同的数据源，但只能有一个数据源。

我尝试从临时数据源中删除选定的元素，但它也从 dropdown1 中删除了选定的选项，因为它们的数据源相同。

HTML

<div class="form-group row">
      <div class="col-md-6" formArrayName = "secondaryPhone">
        <div
        *ngFor = "let secondaryPhoneNumber of contactForm.get('secondaryPhone').controls; let i=index">
        <select (change)="onChangeSelectBox($event)">
          <ng-template ngFor let-item [ngForOf]="phoneList">
            <option *ngIf="showOption(item.id)" value="{{item.id}}">
              {{item.Name}}
            </option>
          </ng-template>
        </select>

        <input class="form-control" kendoTextBox />
        <button type="button" class="close" aria-label="Close" (click)="removePhone(i)">
            <span aria-hidden="true">&times;</span>
        </button>
      </div>
        <div class="col-md-6">
          <a style="cursor:pointer" (click)="addPhone()">Add Phone</a>
        </div>
      </div>
    </div>

组件.ts

  public phoneList = [
      {Name: 'Office Phone'},
      {Name: 'Facility Phone'},
      {Name: 'Fax'}
    ];

    contactForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.createForm();
  }

  ...
  ...
  ...


  public addPhone() {
    if (this.phoneArraylength <= 3) {
      const phoneControl = new FormControl(null);
      (<FormArray>this.contactForm.get('secondaryPhone')).push(phoneControl);
      this.phoneArraylength++;
    }
  }

  get phoneFormArray() {
    return this.contactForm.get('secondaryPhone') as FormArray;
  }

  public removePhone(index: number) {
    this.phoneFormArray.removeAt(index);
    this.phoneArraylength--;
  }

我是 Angular 的新手，所以我可能不知道它的一些功能，所以有没有合适的方法可以在具有相同数据源的动态构建的下拉列表中显示动态选项？

Answer 1

由于数据源是一个对象数组，您可以在任何change 事件期间通过在数据源数组上使用splice() 来创建一个与您将值移动到的类型相同的临时对象数组。然后，如果您更改下拉列表中的值（例如从 Home 更改为 Mobile），您只需在 temp 数组上使用 splice()。