同库同表存储州与区域数据实现Angular级联下拉的问题求助

核心问题排查 #

现有代码的错误集中在3点：

• 没有利用表结构的关联规则：区域数据的code字段前缀和所属州的code完全匹配，如州code: 's_abuja'对应所有code以s_abuja_开头的区域
• 类型匹配错误：category字段为字符串类型，和数字1对比永远返回false
• 过滤逻辑错误：选中州后不是按category过滤，而是按州的code匹配关联区域，且错误将单条数据/单个字段赋值给了数组类型的lgas

修正后代码 #

模板代码（HTML） #

<!-- 州下拉框 -->
<select
  class="form-control"
  id="field_civilState"
  name="civilState"
  formControlName="civilState"
  (change)="onChange($event.target.value)"
>
  <option *ngFor="let state of stateList" [value]="state.code">{{ state.label }}</option>
</select>

<!-- 区域下拉框 -->
<select
  class="form-control"
  id="field_lga"
  name="lga"
  formControlName="lga"
>
  <option *ngFor="let lga of lgas" [value]="lga.code">{{ lga.label }}</option>
</select>

业务逻辑代码（TS） #

import { IDictionary } from '/model/dictionary.model';

civilStates: IDictionary[];
// 新增：州列表，用于绑定州下拉框
stateList: IDictionary[] = [];
lgas: IDictionary[] = [];

ngOnInit(){
  // 第一步：从全量字典数据中过滤出所有州数据
  this.stateList = this.civilStates.filter(item => item.category === 'state');
  // 初始化默认选中第一个州对应的区域
  if (this.stateList.length > 0) {
    const defaultStateCode = this.stateList[0].code;
    this.lgas = this.getLgasByStateCode(defaultStateCode);
  }
}

onChange(selectedStateCode: string) {
  // 选中州后，过滤对应区域
  this.lgas = this.getLgasByStateCode(selectedStateCode);
}

// 抽取公共方法：根据州code获取对应区域列表
private getLgasByStateCode(stateCode: string): IDictionary[] {
  return this.civilStates.filter(item => {
    // 过滤条件：是区域类型，且code以选中的州code+下划线开头
    return item.category === 'local_government_area' && item.code.startsWith(`${stateCode}_`);
  });
}

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