从 Angular 的下拉列表中删除选定的选项

Posted 2023-03-13

【中文标题】从 Angular 的下拉列表中删除选定的选项

【英文标题】：Remove selected option from drop down in Angular

【发布时间】：2020-11-13 09:06:53

【问题描述】：

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

以下代码用于下拉选择：

<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 提供了以下功能

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

现在，当我选择一个选项时，该选项本身会从下拉列表中删除。例如，如果我有 option1,option2,option3 等选项，当我选择 option1 时，option1 将从下拉列表中删除。如何解决此问题并仅删除下一个选择下拉菜单的选项？

【问题讨论】：

***.com/questions/56887985/…

【参考方案1】：

您可以尝试创建两个环境对象并使用 formControl 中的 valueChanges 监听选择。获得选定的 environmentid 并过滤没有此 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>

enter image description here