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

考虑一个 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）或类型保护，但在 Angular 模板代码中该怎么办呢？

答案＃1

我对类似这样的问题的通常回答是，这些问题等同于“我如何在 Angular 模板中做一些复杂的事情？”......不要。在模板中保持简单。改在 TypeScript（在你的组件中）中完成。

这个模板语言看起来像 Typescript/JavaScript，但不是，并且功能要少得多。

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