Question

在我的代码中，我有一个表格阵列，其中显示汽车名称。单击表单数组中用于添加汽车的按钮时，将打开一个选择选项框。我想，当选择了从选择的选项之一，然后选定选项得到去除，当比之前选择的被添加到列表中，这是现在选择从列表中遭到移除该选项的选项被选中的另一种选择。

我的component.html代码

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

我的component.ts代码*

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

选择一个选项时，不会显示名称。这是我的代码 https://stackblitz.com/edit/angular-i56ede?file=src%2Fapp%2Fapp.module.ts

如何从角度下拉列表中删除所选选项

0 个答案: