remove selected option from drop down list in angular

Question

I have a page where dropdown list of items is coming. The list is array of object. I want to remove that object from list which have been selected before. 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>

my component.ts file

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

I am using splice method to remove selected item from list of array. But it is not working as expected.

Answer 1

If you want to not show but can be selected you need attrib as hidden, some like

    <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>

See the stackblitz