Angular中下拉列表选中项移除与回显及显示异常问题求助

我来帮你搞定这个问题，咱们先分析下现有代码的问题，再一步步修复：

问题根源 #

1. 选中后不显示名称：你把选中的汽车从list中移除后，下拉框找不到对应的option，所以显示为空；而且你绑定的是CarNum（存的是ID），没有关联显示名称的逻辑。
2. 更换选项时未回退之前的选项：当前代码只处理了移除新选中的汽车，但没把之前选中的汽车重新加回可选列表。
3. 列表初始化错误：每次点击“Add Car”都调用aType()重置list为原始数据，导致之前移除的选项又回来了。

修复方案 #

第一步：调整组件类的变量与逻辑

先修改component.ts，添加跟踪选中状态和维护可用列表的变量，重构核心方法：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  addAnaGroupForm: FormGroup;
  availableCars: any[] = []; // 存储当前可选的汽车
  selectedCars: 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"
  };

  constructor(private fb: FormBuilder, private http: HttpClient) {}

  ngOnInit() {
    this.addAnaGroupForm = this.fb.group({
      CarInfo: this.fb.array([])
    });
    // 初始化可用汽车列表（深拷贝原始数据）
    this.availableCars = [...this.response.payload];
  }

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

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

  addNewRow() {
    this.formArr.push(this.initItemRows());
    // 初始化该行的选中状态为null
    this.selectedCars.push(null);
  }

  onChangeCar(selectedCar: any, index: number) {
    // 获取当前行之前选中的汽车
    const previousCar = this.selectedCars[index];
    
    // 如果之前有选中项，重新加回可选列表
    if (previousCar) {
      this.availableCars.push(previousCar);
      // 保持列表顺序（可选操作）
      this.availableCars.sort((a, b) => a.Id - b.Id);
    }
    
    // 处理当前选中项
    if (selectedCar) {
      // 从可选列表移除当前选中的汽车
      const carIndex = this.availableCars.findIndex(car => car.Id === selectedCar.Id);
      if (carIndex !== -1) {
        this.availableCars.splice(carIndex, 1);
      }
      // 更新当前行的选中状态和表单值
      this.selectedCars[index] = selectedCar;
      this.formArr.at(index).get('CarNum').setValue(selectedCar.Id);
    } else {
      // 取消选择时清空状态
      this.selectedCars[index] = null;
    }
  }

  deleteRow(index: number) {
    const deletedCar = this.selectedCars[index];
    // 如果删除的行有选中项，重新加回可选列表
    if (deletedCar) {
      this.availableCars.push(deletedCar);
      this.availableCars.sort((a, b) => a.Id - b.Id);
    }
    // 删除表单行和对应选中记录
    this.formArr.removeAt(index);
    this.selectedCars.splice(index, 1);
  }
}

第二步：修改模板逻辑，确保选中项显示

调整component.html中的下拉框部分，添加已选中项的显示（禁用状态），并传递正确的参数给onChangeCar：

<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]="availableCars.length === 0" 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 formArr.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, i)" class="form-control" formControlName="CarNum">
                <option hidden [ngValue]="null">Please Select Car</option>
                <!-- 显示当前行已选中的汽车（禁用状态，避免重复选择） -->
                <option *ngIf="selectedCars[i]" [ngValue]="selectedCars[i]" disabled>
                  {{ selectedCars[i].CarName }} (Selected)
                </option>
                <!-- 显示剩余可选的汽车 -->
                <ng-container *ngFor="let car of availableCars">
                  <option [ngValue]="car">{{ car.CarName }}</option>
                </ng-container>
              </select>
            </div>
          </div>
          <hr>
          <div class="col-md-2">
            <button type="button" (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>

关键修复点说明 #

• 跟踪选中状态：用selectedCars数组记录每一行的选中汽车，这样更换选项时能把之前的汽车重新加回可选列表。
• 保留选中项显示：在下拉框中添加禁用的已选项，确保用户能看到自己选中的汽车名称，不会因为选项被移除而显示为空。
• 正确维护可用列表：只在初始化、选中、删除操作时修改availableCars，避免每次添加行都重置列表。
• 禁用添加按钮（可选）：当没有可用汽车时，禁用“Add Car”按钮，避免用户添加无法选择的行。

内容的提问来源于stack exchange，提问作者neelam