如何在 Angular 模板中访问可能具有多种数据类型的对象答案

【问题标题】：How to access an object that could have several data types in an Angular template如何在 Angular 模板中访问可能具有多种数据类型的对象
【发布时间】：2019-11-13 01:55:57
【问题描述】：

考虑拥有一个可以具有多种数据类型之一的 TypeScript 变量。数据类型具有不同的属性：

let individual: Human | Dog;

export interface Human {
  public hairColor: string;
}

export interface Dog {
  public coatColor: string;
}

现在，在我的 Angular 模板代码中，我尝试访问对象属性 individual.coatColor。在 IntelliJ 中，将不接受属性“coatColor”，大概是因为 individual 也可能是一个根本没有属性 coatColor 的人。

那么即使对象的属性仅存在于几种适用的数据类型之一，我如何仍能访问它呢？在组件代码中，我可以使用显式转换 ((individual as Dog).coatColor) 或 type guards，但是 Angular 模板代码呢？

【问题讨论】：

AFAIK 不幸的是，HTML 模板中没有解决方案。摆脱错误消息的一种“解决方法”是同时声明类型“任何”，因此在您的情况下“让个人：人类|狗|任何”。

标签： angular typescript

【解决方案1】：

我通常对此类问题的回答是“我如何在 Angular 模板中做一些复杂的事情？”是....不要。保持模板简单。改为在 Typescript（在您的组件中）中执行此操作。

模板语言看起来像 Typescript / JavaScript，但不是，而且功能更差。

如果您想要显示格式化的“个人”，请在组件中编写一个 Typescript 方法（可能使用类型保护）来格式化它，然后从模板中调用该方法。

【讨论】：