如何在Angular中展示包含两种对象类型的数据数组？

方法一：定义类型守卫函数 #

在组件类中添加类型守卫，让TypeScript能准确识别对象类型，模板里就能正常访问对应字段：

// 组件类中新增类型守卫方法
isCountryData(data: CountryData | ErrorData): data is CountryData {
  return (data as CountryData).caseCount !== undefined;
}

isErrorData(data: CountryData | ErrorData): data is ErrorData {
  return (data as ErrorData).errorDescription !== undefined;
}

模板中调用这些函数，结合*ngIf分支渲染不同内容：

<div *ngFor="let data of countryData | async">
  <h3>{{ data.country }}</h3>
  <!-- 渲染正常统计数据 -->
  <div *ngIf="isCountryData(data)">
    <p>病例数: {{ data.caseCount }}</p>
    <p>病例日期记录数: {{ data.caseDates.length }}</p>
  </div>
  <!-- 渲染错误提示 -->
  <div *ngIf="isErrorData(data)">
    <p class="error-text">获取数据失败: {{ data.errorDescription }}</p>
  </div>
</div>

方法二：直接在模板中判断属性存在性 #

如果不想额外写类型守卫，也可以直接通过属性是否存在来区分对象类型：

<div *ngFor="let data of countryData | async">
  <h3>{{ data.country }}</h3>
  <!-- 检查caseCount字段，渲染正常数据 -->
  <div *ngIf="data.caseCount !== undefined">
    <p>病例数: {{ data.caseCount }}</p>
    <p>病例日期记录数: {{ data.caseDates.length }}</p>
  </div>
  <!-- 检查errorDescription字段，渲染错误信息 -->
  <div *ngIf="data.errorDescription !== undefined">
    <p class="error-text">获取数据失败: {{ data.errorDescription }}</p>
  </div>
</div>

两种方案对比 #

• 类型守卫能在编译阶段提供类型检查，避免模板中误写不存在的字段，适合复杂场景；
• 属性存在性判断更简洁，适合简单业务场景，但字段名变动时需要同步修改模板中的判断条件。

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