如何在Angular 10前端遍历JSON数据实现印度邦及区县下拉选择展示

1. 预处理JSON数据 #

你提供的原始JSON末尾多了一个多余逗号，需先修正后使用，修正后的数据结构示例：

export const INDIA_STATES = {
  "AN": {
    "name": "Andaman and Nicobar Island (UT)",
    "capital": "Port Blair",
    "districts": {
      "1": "Nicobar",
      "2": "North and Middle Andaman",
      "3": "South Andaman"
    }
  },
  "AP": {
    "name": "Andhra Pradesh",
    "capital": "Amaravati",
    "districts": {
      "1": "Anantapur",
      "2": "Chittoor",
      "3": "East Godavari",
      "4": "Guntur",
      "5": "Krishna",
      "6": "Kurnool",
      "7": "Prakasam",
      "8": "Srikakulam",
      "9": "Sri Potti Sriramulu Nellore",
      "10": "Visakhapatnam",
      "11": "Vizianagaram",
      "12": "West Godavari",
      "13": "YSR District, Kadapa (Cuddapah)"
    }
  }
  // 其余邦数据按相同格式补充
};

2. 编写组件类逻辑 #

在你的组件.ts文件中定义数据类型、存储变量与选中值：

import { Component } from '@angular/core';
import { INDIA_STATES } from './india-states.constant'; // 导入你存的常量数据

// 定义数据类型
interface District {
  [key: string]: string;
}

interface State {
  name: string;
  capital: string;
  districts: District;
}

@Component({
  selector: 'app-state-select',
  templateUrl: './state-select.component.html',
  styleUrls: ['./state-select.component.css']
})
export class StateSelectComponent {
  // 所有邦数据
  states: {[key: string]: State} = INDIA_STATES;
  // 选中的邦
  selectedState: State | null = null;
  // 选中的区县
  selectedDistrict: string = '';
}

3. 模板文件渲染下拉框 #

Angular 10自带KeyValuePipe，可以直接把对象转为键值对数组供*ngFor遍历，不需要额外引入第三方工具。在组件的.html文件中写入如下代码：

<!-- 选择邦的下拉框 -->
<div>
  <label for="state">选择邦/中央直辖区：</label>
  <select id="state" [(ngModel)]="selectedState">
    <option value="" disabled selected>请选择邦</option>
    <option *ngFor="let stateItem of states | keyvalue" [ngValue]="stateItem.value">
      {{ stateItem.value.name }}
    </option>
  </select>
</div>

<!-- 选择区县的下拉框，选中邦后才可选 -->
<div *ngIf="selectedState" style="margin-top: 10px;">
  <label for="district">选择区县：</label>
  <select id="district" [(ngModel)]="selectedDistrict">
    <option value="" disabled selected>请选择区县</option>
    <option *ngFor="let districtItem of selectedState.districts | keyvalue" [value]="districtItem.value">
      {{ districtItem.value }}
    </option>
  </select>
</div>

<!-- 可选：展示选中结果 -->
<div *ngIf="selectedState && selectedDistrict" style="margin-top: 20px;">
  <p>你选中的地区是：{{selectedState.name}} - {{selectedDistrict}}</p>
</div>

注意事项 #

• 如果你使用的是响应式表单，只需要把[(ngModel)]替换为formControlName绑定即可，遍历逻辑不变。
• 如果需要对下拉选项排序，可以给KeyValuePipe传入自定义比较函数，比如按邦名称排序。
• 使用ngModel需要先在对应模块的imports中引入FormsModule。

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