Angular中使用ngForOf时，模板里的联合类型与类型守卫用法

当你在*ngFor中遍历(A | B)[]这类联合类型数组时，完全依赖$any()规避类型检查确实不是规范做法，以下是几种更优雅的类型安全实现方式：

1. 自定义类型守卫函数 #

在组件类中定义类型守卫函数，通过运行时判断让模板获得准确的类型推断，无需$any()。

组件代码示例： #

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

interface A {
  type: 'a';
  propA: string;
}

interface B {
  type: 'b';
  propB: number;
}

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  items: (A | B)[] = [
    { type: 'a', propA: 'Hello' },
    { type: 'b', propB: 123 }
  ];

  // 类型守卫：判断是否为A类型
  isA(item: A | B): item is A {
    return (item as A).type === 'a';
  }

  // 类型守卫：判断是否为B类型
  isB(item: A | B): item is B {
    return (item as B).type === 'b';
  }
}

模板代码示例： #

<div *ngFor="let item of items">
  <ng-container *ngIf="isA(item)">
    <p>A类型元素：{{ item.propA }}</p>
  </ng-container>
  <ng-container *ngIf="isB(item)">
    <p>B类型元素：{{ item.propB }}</p>
  </ng-container>
</div>

这种方式利用TypeScript的类型守卫特性，让模板在分支中自动获得对应类型的属性提示，完全规避类型错误。

2. 组件内预处理拆分数组 #

在组件初始化或数据更新时，将联合类型数组拆分为多个类型明确的子数组，模板中分别遍历这些子数组，从根源上避免类型歧义。

组件代码示例： #

// 承接上面的A、B接口定义
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  rawItems: (A | B)[] = [/* 数据源 */];
  itemsA: A[] = [];
  itemsB: B[] = [];

  ngOnInit() {
    // 拆分数组
    this.itemsA = this.rawItems.filter(item => (item as A).type === 'a') as A[];
    this.itemsB = this.rawItems.filter(item => (item as B).type === 'b') as B[];
  }
}

模板代码示例： #

<h3>A类型列表</h3>
<div *ngFor="let item of itemsA">
  <p>{{ item.propA }}</p>
</div>

<h3>B类型列表</h3>
<div *ngFor="let item of itemsB">
  <p>{{ item.propB }}</p>
</div>

如果业务允许拆分展示，这种方式最直观，模板中无需任何类型判断，类型完全明确。

3. 使用NgTemplateOutlet实现分类型渲染 #

通过定义不同类型的模板片段，结合类型守卫动态选择模板，既保持类型安全，又能统一遍历入口。

模板代码示例： #

<div *ngFor="let item of items">
  <ng-container 
    [ngTemplateOutlet]="isA(item) ? templateA : templateB"
    [ngTemplateOutletContext]="{ $implicit: item }"
  ></ng-container>
</div>

<!-- A类型模板 -->
<ng-template #templateA let-item>
  <p>A类型元素：{{ item.propA }}</p>
</ng-template>

<!-- B类型模板 -->
<ng-template #templateB let-item>
  <p>B类型元素：{{ item.propB }}</p>
</ng-template>

组件类中仍需定义isA、isB类型守卫函数，这种方式适合需要在同一列表中展示不同类型元素的场景，代码结构更清晰，模板复用性更强。

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