javascript - 将 Or 用于多种类型时，类型上不存在属性

Question

在我的 Angular 组件中，我有一个 Input将提供 2 种类型中的 1 种。

@Input() profile: UserProfileDetails | BusinessProfileDetails;

配置文件模板很简单，我只想使用单个模板，所以我不重复代码。但是由于类型的属性不同，我收到了一个模板错误。

export interface UserProfileDetails {
  createdOn: Date;
  id: string;
  name: string;
}

export interface BusinessProfileDetails {
  businessId: string;
  businessLocation: string;
  createdOn: Date;
  id: string;
  name: string;
}

以及我模板中的代码:

<div>
  <h1>{{profile.name}}</h1>
  <div>{{profile.createdOn}}</div>
  <div>{{profile.id}}</div>
  <div *ngIf="profile?.businessId">{{profile.businessId}}</div>
  <div *ngIf="profile?.businessLocation">{{profile.businessLocation}}</div>
</div>

我相信我明白我收到错误的原因，但我不确定如何在仍然使用 or 时解决问题条件 @Input() profile: UserProfileDetails | BusinessProfileDetails;

Answer 1

您可以使用检查 profile 上的属性的函数来设置解决方法。使用 in运算符(operator)。不是最好的解决方案，但您可以根据需要保持接口(interface)联合:
组件

getValue(
  attribut: string,
  obj: UserProfileDetails | BusinessProfileDetails
): any {
  if (attribut in obj) {
    return obj[attribut];
  }
}

模板

<div>
  <h1>{{ profile.name }}</h1>
  <div>{{ profile.createdOn }}</div>
  <div>{{ profile.id }}</div>
  <div>{{ getValue('businessId', profile) }}</div> <!-- can be improved using a check method combined with ngIf -->
  <div>{{ getValue('businessLocation', profile) }}</div>
</div>