Angular 2中如何通过ng-repeat展示嵌套键值对为下拉选项？

首先得提醒你，Angular 2+已经不再使用ng-repeat指令啦，它用的是*ngFor，这是你代码里第一个需要修正的点。另外你的数据结构是嵌套的对象——外层每个键对应的值又是一个单独的键值对，直接遍历外层的话，拿到的value其实是个对象，所以会显示出类似[object Object]的不符合预期的内容。

下面给你两种可行的解决方法：

方法一：使用Angular自带的KeyValuePipe遍历嵌套对象 #

这个管道可以帮我们把对象转换成键值对数组，方便在模板里遍历。

模板代码 #

<select>
  <!-- 先遍历外层的对象项 -->
  <ng-container *ngFor="let outerItem of modeltest.fieldOptions | keyvalue">
    <!-- 再遍历每个外层项里的内层键值对 -->
    <option 
      *ngFor="let innerItem of outerItem.value | keyvalue"
      [value]="innerItem.key">
      {{ innerItem.value }}
    </option>
  </ng-container>
</select>

这里用<ng-container>是因为它不会渲染成真实的DOM元素，只是用来承载*ngFor指令，避免产生多余的节点。

方法二：利用Object API直接获取内层键值（适合确定内层只有一个键值对的情况） #

如果你的数据确定每个外层对象的value里只有一个键值对，那可以简化代码，直接获取内层的键和值：

第一步：在组件类中暴露Object对象 #

因为Angular模板默认不能直接访问全局的Object，所以需要在组件里定义一下：

import { Component } from '@angular/core';

@Component({
  // 这里填你的组件元数据，比如selector、templateUrl等
})
export class YourComponent {
  // 把Object暴露给模板使用
  Object = Object;
  // 你的业务数据
  modeltest = {
    fieldOptions: { 
      "1": {"130":"Option1"}, 
      "2": {"133":"Option4"}, 
      "3": {"131":"Option3"}, 
      "6": {"132":"Option5"} 
    }
  };
}

第二步：模板代码 #

<select>
  <option 
    *ngFor="let outerItem of modeltest.fieldOptions | keyvalue"
    [value]="Object.keys(outerItem.value)[0]">
    {{ Object.values(outerItem.value)[0] }}
  </option>
</select>

这两种方法都能帮你把内层的键（比如132）作为<option>的value，把对应的文本（比如Option5）正确显示出来。

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