Angular中*ngFor遍历混合类型数组时如何实现类型转换？

在Angular模板里直接访问联合类型的专属字段时，TypeScript编译器无法准确推断类型，就会出现你遇到的错误。下面是几种靠谱的解决方法：

方法一：自定义类型守卫（推荐，类型安全） #

在组件类里写两个类型判断函数，帮编译器识别具体类型：

// 组件类中添加类型守卫函数
isDeviceA(device: Device): device is DeviceA {
  return (device as DeviceA).attributeA !== undefined;
}

isDeviceB(device: Device): device is DeviceB {
  return (device as DeviceB).attributeB !== undefined;
}

然后在模板里用这些函数做判断，编译器就会自动识别类型：

<div *ngFor="let device of devices">
  <p>共享属性: {{ device.shared }}</p>
  <div *ngIf="isDeviceA(device)">
    DeviceA专属属性: {{ device.attributeA.join(', ') }}
  </div>
  <div *ngIf="isDeviceB(device)">
    DeviceB专属属性: {{ device.attributeB }}
  </div>
</div>

方法二：用$any()临时绕过类型检查（快速但不推荐） #

如果只是临时测试或者简单场景，可以用Angular提供的$any()跳过类型校验：

<div *ngFor="let device of devices">
  <p>共享属性: {{ device.shared }}</p>
  <div *ngIf="$any(device).attributeA">
    DeviceA专属属性: {{ $any(device).attributeA.join(', ') }}
  </div>
  <div *ngIf="$any(device).attributeB">
    DeviceB专属属性: {{ $any(device).attributeB }}
  </div>
</div>

注意：这种方法会关闭类型检查，一旦属性名写错或者类型变更，编译器不会报错，生产环境尽量少用。

方法三：给接口加类型标识（适合复杂场景） #

给父接口加一个类型区分字段，让每个子接口显式声明自己的类型，这样模板里直接判断类型字段就行：

先修改接口：

interface Device {
  shared: string;
  type: 'A' | 'B'; // 新增类型标识
}

interface DeviceA extends Device {
  type: 'A'; // 固定为A
  attributeA: string[];
}

interface DeviceB extends Device {
  type: 'B'; // 固定为B
  attributeB: number;
}

组件里的数组初始化时带上类型标识：

devices: (DeviceA | DeviceB)[] = [
  { shared: '测试设备A', type: 'A', attributeA: ['属性1', '属性2'] },
  { shared: '测试设备B', type: 'B', attributeB: 999 }
];

模板里直接判断type字段：

<div *ngFor="let device of devices">
  <p>共享属性: {{ device.shared }}</p>
  <div *ngIf="device.type === 'A'">
    DeviceA专属属性: {{ device.attributeA.join(', ') }}
  </div>
  <div *ngIf="device.type === 'B'">
    DeviceB专属属性: {{ device.attributeB }}
  </div>
</div>

这种方式逻辑清晰，类型推断准确，适合长期维护的项目。

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