时间戳

首页 > 解决方案 > Angular：数据绑定到其中一种数据类型中存在的属性

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

问题描述

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

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

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

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

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

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”数据类型，错误显然消失了。

我尝试使用“安全”（？）运算符，但它似乎并没有修复它。

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

标签： angulartypescriptdata-binding

解决方案

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

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

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

推荐阅读