如何從下拉列表中刪除所選選項並以角度顯示可用選項

Question

我有一個按鈕，單擊時會添加更多選擇下拉列表。 所以我想刪除這些選擇框中已經選擇的選項。

下面是我的 component.html代碼，用於從下拉列表中進行選擇

  <div formArrayName="CarInfo">
  <div *ngFor="let itemrow of addAnaGroupForm.get('CarInfo')['controls']; let i = index " 
  [formGroupName]="i">
  <div class="form-group row">

    <label class="col-sm-2 col-form-label">Car Name</label>
    <div class="col-sm-8 txt-box">

    <select (change)="onChangeCar(selectLang.value)" type="number" class="form-control"
     formControlName="CarNum">
        <option hidden value="">Please Select Car</option>
             <ng-container  *ngFor="let anaName of response">
              <option type="number"[ngValue]="anaName.Id">{{ anaName.CarName }}</option>
             </ng-container></select></div></div><hr>
                <div class="col-md-2">
                    <button type="button" *ngIf="addAnaGroupForm.get('CarInfo')['controls']"
                    (click)="deleteRow(i)" class="a-btns btn btn-success tab-btn">
                    <i class="fa fa-trash" aria-hidden="true">Delete</i>
                  </button> </div></div>
        </div>

這是我的component.ts代碼

   import { HttpClient } from "@angular/common/http";
   import { Component, ViewChildren } from "@angular/core";
   import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";

  @Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
  })
 export class AppComponent {
  name = "Angular";
  addAnaGroupForm: FormGroup;

 serverId: any;
 @ViewChildren("selectLang") langSelects;
 response ={
"status": "success",
"code": 200,
"payload": [
    {
        "Id": 21,
        "CarTypeId": 2,
        "CarName": "car1"
       
     
    },
    {
        "Id": 22,
        "CarTypeId": 3,
        "CarName": "car2"
       
     
    },
   
  {
        "Id": 23,
        "CarTypeId": 4,
        "CarName": "car3"
       
     
    },
    {
        "Id": 24,
        "CarTypeId": 5,
        "CarName": "car4"
       
     
    }
    
 
  ],
  "error": [],
  "message": "Car List"
 }
 list: any;
 constructor(private fb: FormBuilder, private http: HttpClient) {}

 ngOnInit() {
 this.addAnaGroupForm = this.fb.group({
  CarInfo: this.fb.array([])
  });
  }

 onChangeCar(value) {
    var str = value;

   this.serverId = str.substr(3);
   console.log(this.serverId);

   }

  aType() {

    this.list = this.response.payload;
    console.log(this.response);
  
   }

  get formArr() {
    return this.addAnaGroupForm.get("CarInfo") as FormArray;
   }

  initItemRows() {
  return this.fb.group({
  CarNum: [""]
  });
  }

  addNewRow() {
    this.formArr.push(this.initItemRows());
    this.aType();
  }

  deleteRow(index: number) {
   console.log("nm" + index);
   this.formArr.removeAt(index);

  }

}

這是我的stackblitz 演示https://stackblitz.com/edit/angular-wppi9b?file=src%2Fapp%2Fapp.component.html

Answer 1

當我理解您正確時，您想將響應中的每輛車一次添加到您顯示的列表中嗎？

因此，您需要在選擇時從 onChangeCar(value) 方法內的列表屬性中刪除選定的汽車項目。

從此處解釋的數組中刪除

Answer 2

首先，您需要將this.response.payload與您的this.formArr相關this.formArr 。 然后，您將從this.formArr數組的其他對象中splice選定的汽車。

onChangeCar(value) {
  var str = value;

  this.serverId = str.substr(3);

  var index = this.response.payload.findIndex(x => x.Id == this.serverId);

  this.response.payload.splice(index, 1);
}