Angular: привязка данных к свойству, существующему в одном из типов данных

Question

Я только что наткнулся на следующий случай.

Допустим, мы создали 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;
 ...
}

При попытке получить доступ к свойству "engine" carDetails ...

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

... Привязка отмечена красным цветомme: "Идентификатор 'engine' не определен. '' не содержит такого члена Angular"

Если я пытаюсь связать общее свойство, например, свойство "brand", ошибка исчезнет:

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

Как только я удаляю dataType "bikeDetails" из "elementDetails", ошибка явно исчезает.

Я пытался использовать оператор "Safe" (?), но опять же, похоже, это не исправляет.

Итак, как мне правильно привязать нечастое свойство, существующее в одном из типов данных, которым объект может быть в это конкретное время?

Answer 1

Вы можете подавить сообщение об ошибке, приведя elementDetails к любому типу в вашем шаблоне:

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

Источник: https://angular.io/guide/aot-compiler#disabling-type-checking-using-any