Angular12中Dropdown(select)手动选择后自动选中首项问题求解

问题根因 #

• 没有给select下拉框绑定选中状态值，当变更检测触发时（比如leagueChoosen修改了父组件数据触发子组件重渲染），select无法记住之前的选中值，会自动回退到首个无匹配的空白选项
• 遍历Map的entries()时没有指定trackBy策略，Angular默认按索引匹配，重渲染时会判定所有option为新节点，直接丢失选中状态
• 原生select的value默认为字符串类型，你绑定的联赛ID是number类型，类型不匹配也会导致选中值匹配失败

修复步骤 #

1. 导入FormsModule #

在声明sidebar组件的模块文件中导入FormsModule，才能使用双向绑定指令ngModel：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
// 导入你的组件
import { SidebarComponent } from './sidebar.component';
import { ContentComponent } from './content.component';
import { WrapperComponent } from './wrapper.component';

@NgModule({
  imports: [
    // 其他已有导入
    FormsModule
  ],
  declarations: [SidebarComponent, ContentComponent, WrapperComponent]
})
export class YourModule {}

2. 给sidebar组件新增选中值变量 #

在sidebar组件的ts文件中新增存储选中联赛ID的变量：

// sidebar.component.ts
selectedLeagueId: number | string = '';

3. 修改select绑定逻辑 #

替换sidebar的select代码，增加双向绑定和trackBy优化：

<!-- sidebar组件html -->
<select [(ngModel)]="selectedLeagueId" (change)="leagueChoosen($event)">
  <option value=""></option>
  <option 
    *ngFor="let league of leagues.entries(); trackBy: trackByLeagueId" 
    [value]="league[1]"
  >
    {{league[0]}}
  </option>
</select>

4. 新增trackBy优化函数 #

在sidebar组件ts中新增trackBy函数，避免不必要的option重绘：

// sidebar.component.ts
trackByLeagueId(index: number, leagueEntry: [string, number]): number {
  return leagueEntry[1];
}

5. 调整leagueChoosen逻辑 #

不要在leagueChoosen中清空selectedLeagueId的值，按原有逻辑把选中值emit给父组件即可，选中状态会被ngModel自动同步保留，不会再跳回空白项。

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