Блог

У меня есть страница, на которой появляется выпадающий список элементов. Список представляет собой массив объектов. Я хочу удалить этот объект из списка, который был выбран ранее. 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)
  }
 

Я использую метод splice для удаления выбранного элемента из списка массива. Но он работает не так, как ожидалось.

Если вы хотите не показывать, но можете быть выбраны, вам нужно присвоить значение hidden, например

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

См. stackblitz

Обновите, если у нас есть FormArray

FormArray может быть FormArray FormControls

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

Или FormArray из FormGroups

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

В любом случае вам нужно, как обычно, когда mannage a FormArray a getter

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

Если это FormArray FormControls, вы используете [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>
 

Если вы используете FormArray из FormGroups, используйте [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 обновляется с тремя случаями

Демонстрация Прежде всего, вы забыли снова сопоставить свой результат с вашим массивом

измените параметры на

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