使用下拉列表实现多选项表格展示及选中项获取异常求助

看起来你遇到的核心问题是单个变量只能存储最后一次选中的值，而你需要收集所有选中的选项并在表格中展示。咱们一步步来修复这个问题：

1. 调整变量类型，支持存储多个选中项 #

原来的selectedType是单个字符串类型，只能保存最后一次选中的值，咱们把它改成数组来存储所有选中项：

types = ['début', 'intermédiaire', 'fin'];
// 将单个字符串改为数组，初始化为空数组
selectedTypes: string[] = []; 
selectedState: string;
stateType: Array<StateType>;

2. 修改选择事件逻辑，添加选中项（避免重复） #

在onTypeSelect方法里，我们要把选中的值添加到数组中，同时做去重处理，防止重复添加同一个选项：

onTypeSelect(event: any) {
  const selectedValue = event.target.value;
  // 检查选项是否已存在，不存在则添加到数组
  if (!this.selectedTypes.includes(selectedValue)) {
    this.selectedTypes = [...this.selectedTypes, selectedValue];
    console.log('所有选中项:', this.selectedTypes);
  } else {
    console.log('该选项已被选中');
  }
}

3. 在表格中展示所有选中项 #

假设你的模板（component.html）结构如下，通过循环遍历selectedTypes来渲染每一行表格数据：

<table>
  <thead>
    <tr>
      <th>类型</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历所有选中的类型，生成表格行 -->
    <tr *ngFor="let type of selectedTypes; let i = index">
      <td>{{ type }}</td>
      <td>
        <!-- 删除按钮，绑定点击事件并传递当前项的索引 -->
        <button (click)="onDeleteType(i)">删除</button>
      </td>
    </tr>
  </tbody>
</table>

<!-- 下拉选择框 -->
<select (change)="onTypeSelect($event)">
  <option *ngFor="let type of types" [value]="type">{{ type }}</option>
</select>

4. （可选）实现删除方法（基础版本） #

虽然你提到暂未实现删除方法，这里提供一个根据索引删除的基础逻辑供参考：

onDeleteType(index: number) {
  // 从数组中移除对应索引的项
  this.selectedTypes.splice(index, 1);
  console.log('删除后的选中项:', this.selectedTypes);
}

这样修改后，每次选中下拉框的选项都会被添加到数组中，表格也能展示所有选中项，而不是只显示最后一个。如果需要和stateType关联，你可以根据selectedTypes去过滤或映射stateType数据后再渲染到表格里。

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