Angular联动下拉框报NG0900错误：仅允许数组/可迭代类型数据

错误说明 #

你遇到的NG0900: Error trying to diff 'Visakhapatnam'. Only arrays and iterables are allowed错误，本质是Angular的*ngFor指令只能遍历数组或可迭代对象，但你绑定的地区数据是单个字符串（比如Visakhapatnam），导致无法遍历渲染。

原始代码复盘 #

1. StateDistrictService 服务代码 #

import { Injectable } from '@angular/core';
import { stateDistrictData } from './state-district.data';

@Injectable({
  providedIn: 'root'
})
export class StateDistrictService {
  getStates() {
    return Object.keys(stateDistrictData);
  }

  getDistricts(state: string) {
    // 问题点：返回单个字符串而非数组
    return stateDistrictData[state];
  }
}

2. StateComponent 组件代码 #

import { Component } from '@angular/core';
import { StateDistrictService } from './state-district.service';

@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent {
  selectedState: string = '';
  districts: any; // 未指定类型且未初始化空数组

  constructor(private stateDistrictService: StateDistrictService) {}

  getStates() {
    return this.stateDistrictService.getStates();
  }

  onStateChange(event: any) {
    this.selectedState = event.target.value;
    this.districts = this.stateDistrictService.getDistricts(this.selectedState);
  }
}

3. HTML 模板代码 #

<select (change)="onStateChange($event)">
  <option value="">选择邦</option>
  <option *ngFor="let state of getStates()" [value]="state">{{state}}</option>
</select>

<select>
  <option value="">选择地区</option>
  <option *ngFor="let district of districts" [value]="district">{{district}}</option>
</select>

4. JSON 数据源（state-district.data.ts） #

export const stateDistrictData = {
  "Andhra Pradesh": "Visakhapatnam",
  "Telangana": "Hyderabad"
  // 每个邦对应单个字符串地区，而非数组
};

分步解决 #

1. 修正数据源结构 #

把每个邦对应的地区改成数组，哪怕只有一个地区也要用数组包裹：

export const stateDistrictData = {
  "Andhra Pradesh": ["Visakhapatnam", "Vijayawada", "Guntur"],
  "Telangana": ["Hyderabad", "Warangal", "Nizamabad"],
  "Karnataka": ["Bengaluru", "Mysuru", "Hubballi"]
};

2. 服务层兼容处理 #

如果无法直接修改数据源，在服务里把单个字符串转为数组，确保返回值始终是可迭代对象：

getDistricts(state: string) {
  const districts = stateDistrictData[state];
  // 兼容单个字符串的情况，统一返回数组
  return Array.isArray(districts) ? districts : districts ? [districts] : [];
}

3. 组件初始化默认值 #

给districts初始化为空数组，避免初始状态下*ngFor绑定undefined：

districts: string[] = [];

4. 模板优化（可选） #

给第二个下拉框加空值判断，没有数据时不渲染或提示：

<select *ngIf="districts.length > 0">
  <option value="">选择地区</option>
  <option *ngFor="let district of districts" [value]="district">{{district}}</option>
</select>
<p *ngIf="districts.length === 0 && selectedState">该邦暂无地区数据</p>

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