typescript - Angular: Databindning till en egenskap som finns i en av datatyperna

Jag har precis råkat på följande fall.

Låt oss säga att vi har skapat 2 olika gränssnitt, dvs:

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

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

Och nu i en Component.ts kan en egenskap vara av någon av båda datatyperna:

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

När du försöker komma åt egenskapen "engine" i carDetails...

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

...Bindningen är markerad i rött och säger till mig: "Identifieraren 'engine' är inte definierad. '' innehåller inte en sådan medlem Angular"

Om jag försöker binda till en vanlig egenskap, t.ex. egenskapen "brand", försvinner felet:

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

Så snart jag tar bort datatypen "bikeDetails" från "elementDetails" försvinner felet självklart.

Jag har försökt använda "Safe" (?) operatorn, men det verkar fortfarande inte lösa det.

Så, hur ska jag binda korrekt till en icke-vanlig egenskap som finns i en av de datatyper objektet kan vara vid det specifika tillfället?

Svar #1

Du kan undertrycka felmeddelandet genom att typbestämma elementDetails till typen any i din mall:

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

Källa: https://angular.io/guide/aot-compiler#disabling-type-checking-using-any