Angular 如何从中的下拉列表中删除选定选项

在我的代码中，我有一个表单数组，其中显示汽车名称。单击表单数组中要添加汽车的按钮时，将打开一个选择选项框。我希望，当选择“选择”中的一个选项时，该选项将被删除；当选择了以前选择的选项以外的另一个选项时，该选项将添加到列表中，而现在选择的选项将从列表中删除

mycomponent.html代码

选择某个选项时，该选项不显示名称。 这是我的密码

---

提供的stackblitz应用程序无法为我打开。对此，我深表歉意。这里是删除元素之前的更新链接，您可以将其临时保存为

selectedCar

或组件中的其他内容。每当触发

onChangeCar

时，您将

selectedCar

添加回列表中，并用新发出的值替换。

<hello name="{{ name }}"></hello>
<form class="forms" [formGroup]="addAnaGroupForm" (ngSubmit)="onSubmit(addAnaGroupForm.value)">
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Car</label>
    <div class="col-sm-10 txt-box ">
        <div class="addButton">
            <button
              [disabled]="disabledAddCar"
              type="button"

              (click)="addNewRow()"
              class="a-btns btn btn-success tab-btn"
            >
              Add Car
              <i class="fa fa-plus" aria-hidden="true"></i>
            </button>
        </div>
        <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($event.target.value)" type="number" class="form-control"
 formControlName="CarNum">
    <option hidden value="">Please Select Car</option>
         <ng-container  *ngFor="let anaName of list">
          <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>

    </div>
 </div>
</form>

      serverId: any;
   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);
var index = this.response.payload.findIndex(x => x.Id == this.serverId);
this.list.splice(index, 1);
}

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) {
this.formArr.removeAt(index);
}