如何解决Angular模板遍历联合类型数组时报NgIterable类型错误

Angular 开启严格模板类型检查时，类型检查器无法将IBasketItem[] | IOrderItem[]这种数组联合类型识别为符合NgIterable要求的可迭代类型，因此抛出类型不匹配错误。

方案1：临时绕过类型检查（最快实现） #

直接在模板的*ngFor指令中使用Angular内置的$any()方法包裹待遍历数组，跳过类型校验：

<tr *ngFor="let item of $any(items)" class="border-0">

也可以在组件类中新增类型断言的getter属性，保留组件侧的类型提示：

// 组件类中新增
get validItems(): (IBasketItem | IOrderItem)[] {
  return this.items as (IBasketItem | IOrderItem)[];
}

模板改为遍历validItems即可：

<tr *ngFor="let item of validItems" class="border-0">

优缺点：实现成本最低，但会丢失部分模板侧的类型校验能力，适合临时快速修复。

方案2：定义公共父接口（最规范，推荐） #

观察IBasketItem和IOrderItem存在大量公共字段，可以先提取公共字段定义父接口，两个子接口继承父接口即可：

// 提取公共父接口
export interface IBaseItem {
  productName: string;
  price: number;
  quantity: number;
  pictureUrl: string;
}
// 原接口改为继承父接口
export interface IBasketItem extends IBaseItem {
  id: number;
  brand: string;
  type: string;
}
export interface IOrderItem extends IBaseItem {
  productId: number;
}

之后将组件的输入属性类型改为父接口数组即可：

@Input() items: IBaseItem[] = [];

优缺点：完全符合TypeScript类型规范，保留完整类型检查能力，后续维护性更高，适合长期迭代的项目。

方案3：关闭严格模板类型检查（不推荐） #

如果不需要模板侧的严格类型校验，可以在项目根目录的tsconfig.json中修改配置关闭校验：

{
  "angularCompilerOptions": {
    "strictTemplates": false
  }
}

优缺点：会丢失所有模板类型检查的能力，增加线上类型错误风险，仅适合临时测试场景使用。

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