如何在 TypeScript 中同步下拉菜单？

Question

我的页面上有 5 个动态下拉菜单。我希望他们所有人都能彼此同步。假设如果我在 dropdown1 中选择值 1，那么在其他下拉列表中，即 2、3、4 和 5，值 1 应该隐藏。如果我在下一个下拉列表中选择了值 2，那么值 1 和 2 应该隐藏在其他下拉列表中，除了我选择它的下拉列表等等。我必须使用 Angular 8.

在 typeScript 中编写此代码

我尝试了下面的代码，但它无法正常工作 expected.In 此代码如果我从下拉列表 1 中选择值 1，它将正常工作，但如果我从下拉列表 2 中选择值 2，那么值 1 也会出现在我的情况下不应该发生的其他下拉列表中。

  public _values1 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values2 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values3 = ["1", "2", "3", "4", "5"]; //These are values for dropdown 
  public _values4 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values5 = ["1", "2", "3", "4", "5"]; //These are values for dropdown

  onChange1(e){ //This is function for 1st dropdown
    const val = e.target.value;
    if (val == 1){
    this._values2 = ["2", "3", "4", "5"];
    this._values3 = ["2", "3", "4", "5"];
    this._values4 = ["2", "3", "4", "5"];
    this._values5 = ["2", "3", "4", "5"];
    }
    if (val == 2){
      this._values2 = ["1", "3", "4", "5"];
      this._values3 = ["1", "3", "4", "5"];
      this._values4 = ["1", "3", "4", "5"];
      this._values5 = ["1", "3", "4", "5"];
    }
    if (val == 3){
      this._values2 = ["1", "2", "4", "5"];
      this._values3 = ["1", "2", "4", "5"];
      this._values4 = ["1", "2", "4", "5"];
      this._values5 = ["1", "2", "4", "5"];
    }
    if (val == 4){
      this._values2 = ["1", "2", "3", "5"];
      this._values3 = ["1", "2", "3", "5"];
      this._values4 = ["1", "2", "3", "5"];
      this._values5 = ["1", "2", "3", "5"];
    }
    if (val == 5){
      this._values2 = ["1", "2", "3", "4"];
      this._values3 = ["1", "2", "3", "4"];
      this._values4 = ["1", "2", "3", "4"];
      this._values5 = ["1", "2", "3", "4"];
    }
  };

我正在将条件写入这样的下拉值，但正如您所看到的，下拉列表中的所有值都会通过每个函数获得每个值的变化运行。这与下拉菜单 2 的功能相同。下面是 HTML 代码：-

    <select class="form-control" id="select1" (change)="onChange1($event)">
      <option disabled selected>Select</option>
      <option *ngFor='let v of _values1'>{{ v }}</option>
    </select>

    <select class="form-control" id="select2" (change)="onChange2($event)">
      <option disabled selected>Select</option>
      <option *ngFor='let v of _values2'>{{ v }}</option>
    </select>

等等...

Answer 1

在这里您可以使用ng-container来解决您的问题。

在您的 .html 文件中，代码应该是

<select class="form-control" id="select1" (change)="onChange1($event)">
  <option disabled selected>Select</option>
  <ng-container *ngFor="let v of _values1">
    <option *ngIf="v != selectedValue2 && v != selectedValue3 && v != selectedValue4 && v != selectedValue5">{{ v }}</option>
  </ng-container>
</select>

<select class="form-control" id="select2" (change)="onChange2($event)">
  <option disabled selected>Select</option>
  <ng-container *ngFor="let v of _values2">
    <option *ngIf="(v != selectedValue1 && v != selectedValue3 && v != selectedValue4 && v != selectedValue5)"> {{ v }}</option>
  </ng-container>
</select>

<select class="form-control" id="select3" (change)="onChange3($event)">
  <option disabled selected>Select</option>
  <ng-container *ngFor="let v of _values3">
    <option *ngIf="(v != selectedValue1 && v != selectedValue2 && v != selectedValue4  && v != selectedValue5)">{{ v }}</option>
  </ng-container>
</select>

<select class="form-control" id="select4" (change)="onChange4($event)">
  <option disabled selected>Select</option>
  <ng-container *ngFor="let v of _values4">
    <option *ngIf="(v != selectedValue1 && v != selectedValue2 && v != selectedValue3  && v != selectedValue5)">{{ v }}</option>
  </ng-container>  
</select>
<select class="form-control" id="select5" (change)="onChange5($event)">
  <option disabled selected>Select</option>
  <ng-container *ngFor="let v of _values5">
    <option *ngIf="(v != selectedValue1 && v != selectedValue2 && v != selectedValue3 && v != selectedValue4)">{{ v }}</option>
  </ng-container>
</select>

在您的 .ts 文件中

 //declare this in the global .
  public _values1 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values2 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values3 = ["1", "2", "3", "4", "5"]; //These are values for dropdown 
  public _values4 = ["1", "2", "3", "4", "5"]; //These are values for dropdown
  public _values5 = ["1", "2", "3", "4", "5"]; //These are values for dropdown

    //declare this in the global .
    selectedValue1  ;
    selectedValue2  ;
    selectedValue3  ;
    selectedValue4  ;
    selectedValue5  ;


    //make the function for each select option 
    onChange1(e){ //This is function for 1st dropdown
    const val = e.target.value;
    console.log(val);
    this.selectedValue1 = val;

  };
  onChange2(e){ //This is function for 2nd dropdown
    const val = e.target.value;
    console.log(val);
    this.selectedValue2 = val;

  };
  onChange3(e){ //This is function for 3rd dropdown
    const val = e.target.value;
    console.log(val);
    this.selectedValue3 = val;
  };
  onChange4(e){ //This is function for 4th dropdown
    const val = e.target.value;
    console.log(val);
    this.selectedValue4 = val;
  };
  onChange5(e){ //This is function for 5th dropdown
    const val = e.target.value;
    console.log(val);
    this.selectedValue5 = val;
  };

如何在 TypeScript 中同步下拉菜单？

How to synchronize dropdowns in TypeScript?

typescript

angular

angular8