如何从下拉列表中删除选定的选项，并以角度显示可用选项

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>

这是我的组件。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);

  }

}

这是我的堆栈闪电战演示 https://stackblitz.com/edit/angular-wppi9b?file=src/app/app.component.html

Answer 1

当我理解你正确时，你想把响应中的每辆车都添加到你显示的列表中吗？

因此，当选定的汽车项目时，需要从onChangeCar（value）-方法中的列表属性中删除它。

从这里解释的数组中删除

Answer 2

首先，您需要关联＜code＞this.response。有效载荷与您的this.formArr。然后，您将从this的其他对象中拼接所选汽车。formArr数组。

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