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

Posted 2023-03-13

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

【英文标题】：remove selected option from drop down list in angular

【发布时间】：2021-04-16 03:19:23

【问题描述】：

我有一个页面，其中包含项目的下拉列表。该列表是对象数组。我想从之前选择的列表中删除该对象。 component.html

    <select (change)="onChange($event.target.value)" type="number"                      
    class="form-control" formControlName="Id" >
       <option hidden value="" >Please Select Item</option>
       <option *ngFor="let name of getItems"  type="number" [ngValue]="name.Id">
           name.ItemName 
       </option>
    </select>

我的 component.ts 文件

   ngOnInit()
       this.service
      .getItemListByRule(this.Id)
      .subscribe((res: any) => 
      this.getItems = res.payload;
    );
   
  onChange(value)     
     this.getItems.splice(this.getItems.findIndex(item => item.Id === value), 1);
     console.log(this.getItem)
  

我正在使用拼接方法从数组列表中删除选定的项目。但它没有按预期工作。

【问题讨论】：

您能否在任何平台（如（jsfiddle 或 codepen 等））上分享您的代码，以便查看和调试？

我不会使用拼接。使用过滤器删除选定的项目并返回列表的其余部分。

【参考方案1】：

如果你不想显示但可以选择你需要隐藏属性，有些喜欢

    <form [formGroup]="form">
        <select type="number"
        class="form-control" formControlName="Id" >
           <option hidden value="null" >Please Select Item</option>
           <option *ngFor="let name of items" 
               <!--just simple hidden if is the value select
                   be carefull!, is not equal use "null" to not add the attrib hidden-->
               [hidden]="form.get('Id').value==name.Id?true:null" 
               type="number" [ngValue]="name.Id">
               name.ItemName 
             </option>
          </select>
    </form>

见the stackblitz

更新如果我们有一个 FormArray

formArray 可以是 FormControls 的 FormArray

  form = new FormGroup(
    array: new FormArray([new FormControl(null), new FormControl(null)])
  );

或 FormGroups 的 FormArray

  form = new FormGroup(
    array: new FormArray([
      new FormGroup(
          id:new FormControl()
         ), 
      new FormGroup(
          id:new FormControl()
         ), 
    ])
  );

在任何情况下你都需要，像往常一样管理一个formArray一个getter

  get array() 
    return this.form.get("array") as FormArray;
  

如果是 FormControls 的 FormArray，则使用 [hidden]="array.at(i).value==name.Id?true:null"

<form [formGroup]="form">
    <div formArrayName="array">
        <div *ngFor="let control of array.controls;let i=index">
            <select type="number"
    class="form-control" [formControlName]="i" >
       <option hidden value="null" >Please Select Item</option>
       <option *ngFor="let name of items" 
            [hidden]="array.at(i).value==name.Id?true:null"
            type="number" [ngValue]="name.Id">
           name.ItemName 
         </option>
      </select>
        </div>
    </div>
</form>

如果您使用 FormGroup 的 FormArray，请使用 [hidden]="array.at(i).value.Id==name.Id?true:null"

<form [formGroup]="form">
    <div formArrayName="array">
        <div *ngFor="let control of array.controls;let i=index" [formGroupName]="i">
            <select type="number"
    class="form-control" formControlName="Id" >
       <option hidden value="null" >Please Select Item</option>
       <option *ngFor="let name of items" 
             [hidden]="array.at(i).value.Id==name.Id?true:null" 
             type="number" [ngValue]="name.Id">
           name.ItemName 
         </option>
      </select>
        </div>
    </div>
</form>

注意：stackblitz 更新了三种情况

【讨论】：

@neelam，我只是更新了答案和堆栈闪电战（它只考虑如何“询问”控件。如果是 FormControls 的 formArray array.at(i).value if 是 FormGroups 的 formArray array.at(i).value.Id

如果我们有如下stackblitz链接中的表单数组怎么办。 stackblitz.com/edit/…

@neelam 我遇到了与表单数组类似的问题。 Array.filter 不适合，因为它修改了实际的数组。如果你修好了，请帮忙

【参考方案2】：

Demo首先你忘了把你的结果再次赋值给你的数组

将选项更改为

 <option *ngFor="let name of getItems"  type="number" value="name.Id">
     name.ItemName 
 </option>

并改变方法分配给你的数组

onChange(value)    
   this.getItems=this.getItems.filter(x=>x.Id!=value)


 

【讨论】：

它正在工作。但我无法在输入框中看到选定的选项。

@neelam，您需要标记为“隐藏”，而不是过滤项目列表