Angular 14中实现国家-州二级下拉框联动功能

API 探路者

2026-8-11

解决Angular联动下拉框的两个问题

一、给国家下拉框添加占位符

用字符串列表填充下拉框时，通过添加空占位选项+设置表单初始值的方式实现占位效果：

组件类中给国家数组补充空占位项（或初始化时插入）：

countries: string[] = ['', 'USA', 'Canada', 'India'];

模板中定义占位选项并绑定表单控件：

<select formControlName="country">
  <option value="" disabled selected>选择国家</option>
  <option *ngFor="let country of countries" [value]="country">{{country}}</option>
</select>

初始化表单时将country控件初始值设为空字符串：

this.form = this.fb.group({
  country: [''],
  state: ['']
});

二、实现国家-州的联动加载

假设你的州数据结构如下，通过监听国家控件变化过滤对应州列表：

定义州数据并声明过滤后列表：

statesData = [
  { country: 'USA', states: ['California', 'Texas', 'New York'] },
  { country: 'Canada', states: ['Ontario', 'Quebec', 'British Columbia'] },
  { country: 'India', states: ['Delhi', 'Maharashtra', 'Karnataka'] }
];
filteredStates: string[] = [];

监听国家控件值变化，实时过滤州列表：

ngOnInit() {
  this.form.get('country')?.valueChanges.subscribe(selectedCountry => {
    if (selectedCountry) {
      const countryMatch = this.statesData.find(item => item.country === selectedCountry);
      this.filteredStates = countryMatch ? countryMatch.states : [];
    } else {
      this.filteredStates = [];
      this.form.get('state')?.setValue('');
    }
  });
}

模板中绑定过滤后的州列表，添加占位并禁用空状态：

<select formControlName="state" [disabled]="!filteredStates.length">
  <option value="" disabled selected>选择州/省</option>
  <option *ngFor="let state of filteredStates" [value]="state">{{state}}</option>
</select>