Question

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

我尝试从临时数据源中删除选定的元素，但由于其数据源相同，它也从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>

Component.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

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

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

1 个答案: