Angular：数据绑定到其中一种数据类型中存在的属性答案

【问题标题】：Angular: Data binding to a property existing in one of the Data TypesAngular：数据绑定到其中一种数据类型中存在的属性
【发布时间】：2023-03-31 12:15:01
【问题描述】：

我刚刚偶然发现了以下案例。

假设我们创建了 2 个不同的接口，即：

export interface bikeDetails {
  brand: string;
  wheels: number;
}

export interface carDetails {
  brand: string;
  wheels: number;
  engines: number;
}

现在在 Component.ts 中，属性可以是两种数据类型之一：

export class MultiComponent {
 ...
 isCar: boolean;
 elementDetails: bikeDetails | carDetails;
 ...
}

尝试访问 carDetails 的“引擎”属性时...

<div *ngIf="isCar && elementDetails">
   <h5>{{elementDetails.engines}}</h5>
</div>

...绑定标记为红色告诉我：“未定义标识符'引擎'。''不包含这样的成员Angular”

如果我尝试绑定到一个公共属性，例如“品牌”属性，错误就消失了：

 <div *ngIf="isCar && elementDetails">
    <h5>{{elementDetails.wheels}}</h5>
 </div>

一旦我从“elementDetails”中删除“bikeDetails”数据类型，错误显然消失了。

我尝试使用“安全”(?) 运算符，但它似乎也无法修复它。

那么，我应该如何正确绑定到对象在特定时间可能存在的一种数据类型中存在的非通用属性？

【问题讨论】：

标签： angular typescript data-binding

【解决方案1】：

您可以通过将 elementDetails 转换为模板中的任何类型来抑制错误消息：

<div *ngIf="isCar && elementDetails">
   <h5>{{$any(elementDetails).engines}}</h5>
</div>

来源：https://angular.io/guide/aot-compiler#disabling-type-checking-using-any

【讨论】：