angular - 如何访问在 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也可能是没有属性(property)的人 coatColor根本。

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

Answer 1

对于此类问题，我通常会回答“我如何在 Angular 模板中做一些复杂的事情？”是……不要。保持模板简单。而是在 Typescript(在您的组件中)中执行此操作。

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

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