Angular中如何通过动态Key遍历绑定数组（含ng-options场景）

嘿，我来帮你搞定这个问题！你试的第二种写法 *ngFor="let item of obj[keyVar]" 其实逻辑是对的，但大概率是外层循环没处理好导致无效，尤其是结合下拉选框的场景，咱们一步步理清楚：

首先要注意：在Angular里直接遍历对象是拿不到键的，必须用 keyvalue 管道把对象转换成键值对数组，这可能是你之前踩的坑！

举个完整的示例，假设你的组件代码是这样的：

this.obj = {
  fruits: ['Apple', 'Banana', 'Orange'],
  vegetables: ['Carrot', 'Spinach', 'Broccoli']
};

对应的模板代码应该这么写：

<!-- 外层用keyvalue管道拿到每个键值对 -->
<div *ngFor="let keyPair of obj | keyvalue">
  <h3>{{ keyPair.key }}</h3>
  <!-- 内层遍历对应数组，两种写法都可行 -->
  <select>
    <!-- 写法1：直接用键值对里的value属性 -->
    <option *ngFor="let item of keyPair.value" [value]="item">{{ item }}</option>
    
    <!-- 写法2：用obj[key]的方式（就是你之前尝试的第二种写法） -->
    <!-- <option *ngFor="let item of obj[keyPair.key]" [value]="item">{{ item }}</option> -->
  </select>
</div>

为什么你之前的写法无效？ #

很大可能是外层循环没有加 keyvalue 管道，直接写 *ngFor="let keyVar of obj" 是获取不到对象的键的，Angular会默认把对象当成不可遍历的结构处理，自然内层的 obj[keyVar] 就找不到对应数组了。

另外补充一句：你提到的 ng-options 是AngularJS的语法，Angular 2+已经不再使用这个指令了，现在都是通过 *ngFor 直接在 <option> 标签上循环生成选项哦！

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