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

Question

考虑具有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模板代码呢？

Answer 1

我通常对此类问题的回答就是“我如何在Angular模板中做复杂的事情？”是...。保持模板简单。而是使用Typescript（在您的组件中）执行。

模板语言看起来像Typescript / JavaScript，但不是，功能也要差很多。

如果要显示格式化的“个人”，请在组件中编写一个Typescript方法（可能使用类型保护程序）以对其进行格式化，然后从模板中调用该方法。