Angular 17中如何使用新@for语法遍历对象？

问题原因 #

Angular 17的新@for指令类型推断比旧*ngFor更严格，使用keyvalue管道转换对象后，TypeScript无法自动识别client.value的数组类型，默认推断为never，导致出现“Type 'never' must have a 'Symbol.iterator' method that returns an iterator”错误。

修复方案 #

1. 明确类型定义（推荐） #

先给clientMenu和菜单子项定义清晰的TypeScript类型，让编译器能正确推断：

// 定义单个菜单子项的类型
interface MenuItem {
  label: string;
  route: string;
  // 根据实际需求添加其他属性
}

// 定义clientMenu的类型：键为字符串，值为MenuItem数组
type ClientMenu = Record<string, MenuItem[]>;

// 在组件中声明变量时使用该类型
clientMenu: ClientMenu = {
  "系统设置": [{ label: "用户管理", route: "/user" }, { label: "权限配置", route: "/permission" }],
  "数据中心": [{ label: "数据统计", route: "/stat" }]
};

2. 模板中显式指定类型 #

如果不想修改组件类型，可在模板里给client.value强制指定类型：

@for (client of clientMenu | keyvalue; track client.key) {
  <div class="menu-group">
    <h3>{{ client.key }}</h3>
    <!-- 显式将client.value断言为MenuItem数组 -->
    @for (item of client.value as MenuItem[]; track item.route) {
      <a [routerLink]="item.route">{{ item.label }}</a>
    }
  </div>
}

3. 绕过keyvalue管道，直接遍历对象键 #

若clientMenu类型明确，也可以直接遍历对象的键，避免keyvalue带来的类型模糊问题：

@for (groupKey of Object.keys(clientMenu); track groupKey) {
  <div class="menu-group">
    <h3>{{ groupKey }}</h3>
    @for (item of clientMenu[groupKey]; track item.route) {
      <a [routerLink]="item.route">{{ item.label }}</a>
    }
  </div>
}

代码对比 #

原*ngFor代码 #

<div *ngFor="let client of clientMenu | keyvalue">
  <h3>{{ client.key }}</h3>
  <div *ngFor="let item of client.value">
    <a [routerLink]="item.route">{{ item.label }}</a>
  </div>
</div>

修复后@for代码（显式类型版） #

@for (client of clientMenu | keyvalue; track client.key) {
  <h3>{{ client.key }}</h3>
  @for (item of client.value as MenuItem[]; track item.route) {
    <a [routerLink]="item.route">{{ item.label }}</a>
  }
}

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