Angular如何嵌套ngFor遍历对象属性及其对应值？

1. HTML模板嵌套*ngFor写法 #

直接在外层*ngFor（搭配keyvalue管道遍历对象）的基础上，对内层的数组值再套一层*ngFor即可，示例代码如下：

<ul>
  <!-- 外层遍历对象的键值对 -->
  <li *ngFor="let group of myData | keyvalue">
    <!-- 展示对象的key -->
    **{{ group.key }}**
    <!-- 内层遍历value对应的字符串数组 -->
    <ul>
      <li *ngFor="let item of group.value">
        {{ item }}
      </li>
    </ul>
  </li>
</ul>

2. TypeScript正确类型声明（替代any） #

不用any的话，有两种常用方式声明该对象类型：

方式一：使用Record工具类型

// 直接声明变量类型为Record<string, string[]>
myData: Record<string, string[]> = {
  "水果": ["苹果", "香蕉", "橙子"],
  "蔬菜": ["白菜", "胡萝卜", "西兰花"]
};

方式二：自定义接口

// 先定义接口
interface StringGroup {
  [key: string]: string[];
}

// 用接口声明变量
myData: StringGroup = {
  "水果": ["苹果", "香蕉", "橙子"],
  "蔬菜": ["白菜", "胡萝卜", "西兰花"]
};

这两种方式都能保证类型安全，还能让IDE提供正确的代码提示，比用any更规范。

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