从Angular下拉菜单中删除选定的选项 [英] Remove selected option from drop down in Angular

问题描述

我有一个按钮，单击后会添加更多选择下拉菜单.因此，我想删除这些选择框中已经选择的选项，以防止重复.

I have a button which adds more select drop downs when clicked. So I would like to remove the already selected options in these select boxes for preventing duplication.

以下代码用于选择下拉列表:

The following code is used for the select drop down:

<select class="select form-control"
   formControlName="environment_id" (change)="onEnvChange($event.target.value)">
   <option selected="selected" disabled value="">Select Environment
   </option>
   <ng-container  *ngFor="let environment of environments">
      <option *ngIf="!selectedEnvironments.includes(environment.environment_id)"
      [value]="environment.environment_id">
      {{environment.environment_id}}</option>
   </ng-container>
</select>

，在组件中，我具有以下用于 change

and in the component I ave the following function for change

 public onEnvChange(selectedEnvironment)
 {
     this.selectedEnvironments.push(selectedEnvironment);
 }

现在，当我选择一个选项时，该选项本身将从下拉菜单中删除.例如，如果我有诸如 option1，option2，option3 之类的选项，则当我选择 option1 时，将从下拉列表中删除 option1 .如何解决此问题并仅删除下一个选择下拉菜单的选项?

Now when I select an option, that option itself gets removed from the dropdown. For example if I have options like option1,option2,option3 etc, when I select option1, option1 is getting removed from the dropdown. How to fix this and remove the option only for the next select dropdown ?

推荐答案

您可以尝试创建两个环境对象，并使用formControl中的valueChanges侦听选择.获得选定的环境ID并过滤没有该ID的其他对象

You can try create two objects of environments and listen selection with valueChanges from formControl. After you get the selected environmentid and filter the other object without this id

示例

  ngOnInit(){
    this.createForm();
    this.getEnvironments();
    this.environmentChanges()
  }

  createForm(){
      this.form = this.fb.group({
           'environment_id_1': [''],
           'environment_id_2' : ['']
})}

  getEnvironments(){
      const environments = [
      {  'environment_id': 1, 'environment': 'A'  },
      {  'environment_id': 2, 'environment': 'B'  },
      {  'environment_id': 3, 'environment': 'C'  },
      {  'environment_id': 4, 'environment': 'D'  }];
      this.environments1 = environments;
      this.environments2 = environments;}

  environmentChanges(){
     this.form.controls['environment_id_1'].valueChanges
             .subscribe((environment_id)=>{
             this.environments2 = this.environments1.filter((env)=> env.environment_id != environment_id)
})}

<form [formGroup]="form">
<div class="row">
    <select class="select form-control"   formControlName="environment_id_1">   
        <option value="">Select Environment 1 </option> 
        <option *ngFor="let environment of environments1"  [value]="environment.environment_id"> {{environment.environment}} </option> 
    </select>
</div>
<div class="row" style="padding-top: 10px;">
    <select class="select form-control"   formControlName="environment_id_2">   
        <option value="">Select Environment 2 </option> 
        <option *ngFor="let environment of environments2"  [value]="environment.environment_id"> {{environment.environment}} </option> 
    </select>
</div>

在此处输入图片描述

这篇关于从Angular下拉菜单中删除选定的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！