Angular项目中Select加载大量城市选项卡顿问题求助

当城市列表超过1000条时，原生<select>会因一次性渲染所有DOM节点引发性能瓶颈，以下是几个经过验证的实用解决方案：

1. 使用Angular CDK虚拟滚动（推荐） #

Angular CDK的虚拟滚动组件仅渲染当前视口内的选项，无论列表多大，DOM节点数量始终维持在几十级，彻底解决渲染卡顿问题。

实现步骤： #

• 安装并导入ScrollingModule：

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    // ...其他模块
    ScrollingModule
  ]
})
export class YourModule { }

• 替换原生<select>为自定义虚拟滚动下拉（原生select不支持虚拟滚动，需自定义结构）：

<!-- 国家选择保持不变 -->
<select name="country" formControlName="country">
  <option *ngFor="let country of countries" value="{{ country.ISOCode }}">
    {{ country.Name }}
  </option>
</select>
<br />
<label for="city">City of Birth</label>

<!-- 自定义虚拟滚动下拉容器 -->
<div class="custom-select" (click)="toggleCityDropdown()">
  {{ selectedCity?.Name || 'Select a city' }}
  <span class="arrow">▼</span>
</div>

<div *ngIf="showCityDropdown" class="dropdown-panel">
  <cdk-virtual-scroll-viewport itemSize="30" class="viewport">
    <div *cdkVirtualFor="let city of cities" 
         class="dropdown-option"
         (click)="selectCity(city)">
      {{ city.Name }}
    </div>
  </cdk-virtual-scroll-viewport>
</div>

• 组件内添加控制逻辑：

selectedCity: any;
showCityDropdown = false;

toggleCityDropdown() {
  this.showCityDropdown = !this.showCityDropdown;
}

selectCity(city: any) {
  this.selectedCity = city;
  this.showCityDropdown = false;
  this.yourForm.get('city')?.setValue(city.Name);
}

• 基础样式补充：

.custom-select {
  padding: 8px 12px;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.dropdown-panel {
  position: absolute;
  border: 1px solid #ccc;
  max-height: 300px;
  width: 200px;
}

.viewport {
  height: 300px;
}

.dropdown-option {
  padding: 8px 12px;
  cursor: pointer;
}

.dropdown-option:hover {
  background-color: #f5f5f5;
}

2. 添加实时搜索过滤 #

在城市选择框上方增加搜索输入框，用户输入时实时过滤城市列表，减少需要渲染的选项数量。

实现： #

• 模板添加搜索框：

<label for="city">City of Birth</label>
<input type="text" placeholder="Search city" [(ngModel)]="citySearchTerm" />
<select name="city" formControlName="city">
  <option *ngFor="let city of filteredCities" value="{{ city.Name }}">
    {{ city.Name }}
  </option>
</select>

• 组件内处理过滤逻辑：

citySearchTerm = '';
filteredCities: any[] = [];

ngOnInit() {
  // 监听国家切换，更新对应城市列表并过滤
  this.yourForm.get('country')?.valueChanges.subscribe(countryCode => {
    this.cities = this.getCitiesByCountry(countryCode); // 假设已有该方法
    this.filterCities();
  });
}

// 防抖过滤，减少频繁计算
filterCities() {
  if (!this.citySearchTerm) {
    this.filteredCities = this.cities;
    return;
  }
  const term = this.citySearchTerm.toLowerCase();
  this.filteredCities = this.cities.filter(city => 
    city.Name.toLowerCase().includes(term)
  );
}

3. 替换为优化后的UI组件库 #

使用Angular Material的MatSelect或NG-ZORRO的NzSelect，这类组件内部对大数据量做了优化，部分还内置虚拟滚动和搜索功能，无需自行实现复杂逻辑。

以Angular Material为例：

• 导入对应模块：

import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    // ...其他模块
    MatSelectModule,
    MatInputModule
  ]
})
export class YourModule { }

• 模板代码：

<mat-form-field>
  <mat-label>Country</mat-label>
  <mat-select formControlName="country">
    <mat-option *ngFor="let country of countries" [value]="country.ISOCode">
      {{ country.Name }}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>City of Birth</mat-label>
  <input matInput placeholder="Search city" [(ngModel)]="citySearchTerm" />
  <mat-select formControlName="city">
    <mat-option *ngFor="let city of filteredCities" [value]="city.Name">
      {{ city.Name }}
    </mat-option>
    <mat-option *ngIf="filteredCities.length === 0">No cities found</mat-option>
  </mat-select>
</mat-form-field>

4. 懒加载与分页加载 #

若城市数据量极大（上万条级别），可进一步优化：

• 仅在用户点击城市选择框时，才加载对应国家的城市数据（而非页面初始化时加载全部）
• 实现分页加载，当用户滚动到下拉列表底部时，自动加载下一页数据

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