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

Question

我有一个页面，其中包含项目的下拉列表。该列表是对象数组。我想从之前选择的列表中删除该对象。 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)
  }

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

Answer 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 更新了三种情况

Answer 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)
}