Angular中*ngFor渲染基类列表不同对象的类型兼容问题

针对你遇到的基类列表无法访问子类属性的问题，以下几种方案可以解决：

方法1：类型守卫（推荐） #

在组件类中定义类型守卫函数，帮助TypeScript识别具体的子类类型：

// 组件.ts文件
isSafetyReport(report: ReturnReport): report is SafetyReport {
  // 通过判断子类专属属性是否存在来区分类型
  return (report as SafetyReport).safetyReportSummary !== undefined;
}

模板中结合*ngIf使用该函数，此时TypeScript会自动推断当前report的类型，可安全访问子类属性：

<div *ngFor="let report of reportList$ | async">
  <!-- 渲染SafetyReport内容 -->
  <ng-container *ngIf="isSafetyReport(report)">
    {{ report.safetyReportSummary.occurrenceDate }}
    <!-- 其他SafetyReport专属字段 -->
  </ng-container>
  <!-- 渲染DraftSafetyReport内容 -->
  <ng-container *ngIf="!isSafetyReport(report)">
    <!-- Draft报表的专属渲染逻辑 -->
  </ng-container>
</div>

方法2：ng-template + ngTemplateOutlet（适合复杂渲染场景） #

如果两种报表的UI结构差异较大，可通过模板分离不同类型的渲染逻辑：

<!-- 定义SafetyReport的渲染模板 -->
<ng-template #safetyReportTpl let-report>
  <div>
    报告日期：{{ report.safetyReportSummary.occurrenceDate }}
    报告状态：{{ report.status }}
  </div>
</ng-template>

<!-- 定义DraftSafetyReport的渲染模板 -->
<ng-template #draftReportTpl let-report>
  <div>
    草稿报表专属内容
  </div>
</ng-template>

<!-- 遍历列表，根据类型选择模板渲染 -->
<div *ngFor="let report of reportList$ | async">
  <ng-container 
    [ngTemplateOutlet]="isSafetyReport(report) ? safetyReportTpl : draftReportTpl"
    [ngTemplateOutletContext]="{ $implicit: report }"
  ></ng-container>
</div>

同样需要配合方法1中的isSafetyReport类型守卫，确保模板内的类型推断正确。

方法3：$any类型断言（临时快速方案） #

若只是临时绕过类型检查，可在模板中使用$any()包裹对象，同时建议添加可选链?.避免空值报错：

<div *ngFor="let report of reportList$ | async">
  {{ $any(report).safetyReportSummary?.occurrenceDate }}
</div>

⚠️ 注意：该方法会关闭TypeScript的类型检查，不推荐长期使用，可能隐藏潜在的类型错误。

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