Angular 5中JSON数组对象联动下拉框取值报错排查

这个问题我之前帮同事排查过，核心是你的下拉框绑定逻辑有两处关键问题，导致data2要么初始时是undefined，要么选中后变成了字符串，根本不是你需要的Dataset对象，所以读取serviceValues时必然报错。

错误原因拆解 #

1. 初始值未初始化：组件里的data2没有设置初始值，页面加载时它是undefined，第二个下拉框直接访问data2.serviceValues自然会抛出“无法读取undefined的属性”错误。
2. 绑定值类型错误：第一个下拉框的option用value="{{dataset[idx].serviceType}}"，这会把选中值绑定成字符串类型的服务名称，而不是对应的Dataset对象。哪怕你加了(change)事件试图赋值，这里的idx其实是*ngFor循环最后一次的索引（不是当前选中项的索引），赋值逻辑完全无效。
3. ngModel复用冲突：两个下拉框绑定同一个data2变量，第一个需要的是Dataset对象，第二个需要的是字符串类型的版本号，类型不匹配会导致更多隐性问题。

修正后的完整代码 #

组件TS代码

// 先确保Dataset类型已定义
interface Dataset {
  serviceType: string;
  serviceValues: string[];
}

export class YourComponent {
  dataset: Dataset[] = [
    { serviceType: "server Mangemanet", serviceValues: ["6.2", "6.3", "6.6"] },
    { serviceType: "server admin", serviceValues: ["4.1", "4.2", "4.6"] },
  ];
  // 初始化选中第一个数据集，避免初始undefined
  selectedService: Dataset = this.dataset[0] || {};
  // 单独用变量存第二个下拉框选中的版本号
  selectedVersion: string = "";
}

模板HTML代码

<td>
  <select [(ngModel)]="selectedService" placeholder="select a service">
    <!-- 用[ngValue]绑定整个Dataset对象，而非字符串 -->
    <option *ngFor="let service of dataset" [ngValue]="service">
      {{service.serviceType}}
    </option>
  </select>
</td>
<td>
  <select [(ngModel)]="selectedVersion" placeholder="select a version">
    <!-- 安全导航操作符?.，避免selectedService为空时报错 -->
    <option *ngFor="let version of selectedService?.serviceValues" [value]="version">
      {{version}}
    </option>
  </select>
</td>

关键优化点说明 #

• 用[ngValue]绑定对象：Angular中value仅支持绑定字符串，要绑定复杂对象必须用[ngValue]，这样选中后selectedService会直接是对应的Dataset对象，无需额外处理change事件。
• 初始化默认值：给selectedService设置初始值为第一个数据集，确保页面加载时第二个下拉框有数据可渲染。
• 安全导航操作符?.：即使selectedService意外为空，selectedService?.serviceValues会返回undefined而非抛出错误，避免页面崩溃。
• 分离ngModel变量：两个下拉框用不同变量绑定，明确各自职责，避免类型冲突。

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