使用*ngFor与KeyValuePipe时触发ngtsc(2322)类型错误

这个错误的核心是Angular模板的类型检查无法识别联合类型数组（Union[] | Union[]）符合NgIterable要求。当你使用KeyValuePipe处理Parents类型的对象时，返回的每个parent.value是Parents["mum"] | Parents["dad"]的联合类型，对应的children就是两种不同元素类型的数组的联合：

({ parent: "mum"; key: "alice" } | { parent: "mum"; key: "frank" })[] 
| 
({ parent: "dad"; key: "alice" } | { parent: "dad"; key: "frank" })[]

Angular的*ngFor要求迭代对象必须是明确的NgIterable类型，而TypeScript无法自动将这种数组的联合类型推断为合法的可迭代对象。

下面提供几种无需$any()的类型安全解决方法：

方法1：避免使用KeyValuePipe，直接遍历父节点键数组 #

既然你已经定义了ParentKeys枚举类型，直接在组件中声明父节点键的数组，绕过KeyValuePipe带来的联合类型问题：

组件代码 #

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

type ParentKeys = "mum" | "dad";
type ChildKeys = "alice" | "frank";

type Parents = {
    [parentKey in ParentKeys]: {
        children: Array<{
            parent: parentKey;
            key: ChildKeys;
        }>;
    };
};

@Component({
  selector: 'app-family',
  templateUrl: './family.component.html'
})
export class FamilyComponent {
  parentKeys: ParentKeys[] = ["mum", "dad"];
  parents: Parents = {
    mum: {
      children: [{ parent: "mum", key: "alice" }],
    },
    dad: {
      children: [{ parent: "dad", key: "frank" }, { parent: "dad", key: "alice" }],
    },
  };
}

模板代码 #

<div *ngFor="let parentKey of parentKeys">
    <div *ngFor="let child of parents[parentKey].children">
        <div>child {{child.key}} of parent {{child.parent}}</div>
    </div>
</div>

这种方式下，parents[parentKey].children的类型是明确的单一数组类型，模板类型检查可以直接通过。

方法2：统一Parents类型中children的元素类型 #

修改Parents的类型定义，让所有父节点的children元素类型统一为一个联合类型，而非每个父节点对应独立的联合类型数组：

修改后的类型定义 #

type ParentKeys = "mum" | "dad";
type ChildKeys = "alice" | "frank";

// 统一的子节点类型
type Child = {
    parent: ParentKeys;
    key: ChildKeys;
};

type Parents = {
    [parentKey in ParentKeys]: {
        children: Child[];
    };
};

这样parent.value.children的类型就是单一的Child[]，KeyValuePipe处理后模板类型检查也能正常识别。

方法3：在组件中预处理KeyValue数组并断言类型 #

如果你必须使用KeyValuePipe，可以在组件中提前将parents转换为明确类型的KeyValue数组，避免模板中的联合类型问题：

组件代码 #

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

type ParentKeys = "mum" | "dad";
type ChildKeys = "alice" | "frank";

type Parents = {
    [parentKey in ParentKeys]: {
        children: {
            parent: parentKey;
            key: childKey;
        }[];
    };
};

@Component({
  selector: 'app-family',
  templateUrl: './family.component.html'
})
export class FamilyComponent {
  parents: Parents = {
    mum: {
      children: [{ parent: "mum", key: "alice" }],
    },
    dad: {
      children: [{ parent: "dad", key: "frank" }, { parent: "dad", key: "alice" }],
    },
  };

  // 预处理为明确类型的KeyValue数组
  parentEntries: KeyValue<ParentKeys, { children: Array<{ parent: ParentKeys; key: ChildKeys }> }>[] = 
    Object.entries(this.parents) as KeyValue<ParentKeys, { children: Array<{ parent: ParentKeys; key: ChildKeys }> }>[];
}

模板代码 #

<div *ngFor="let parent of parentEntries">
    <div *ngFor="let child of parent.value.children">
        <div>child {{child.key}} of parent {{child.parent}}</div>
    </div>
</div>

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