Problema con el compilador de Angular en la entrada del componente al usar interfaces heredadas/extensas.
Tengo un problema con una variable Input() de un Componente Angular. Lanza un error relacionado con el tipo en el archivo de plantilla de la página. Tengo dos interfaces, una página y un componente para que ocurra el error.
Las dos interfaces son Bike y BikeMin donde Bike extiende BikeMin (y otras interfaces):
typescript
export interface Bike extends BikeRemote, BikeMin, BikeLocal {}
Tengo un Componente BikeFeaturePickerComponent con un ngModel de tipo BikeMin:
export class BikeFeaturePickerComponent {
@Output("bikeChange")
public bikeChange: EventEmitter<bikemin> = new EventEmitter<bikemin>();
@Input("bike")
public bike: BikeMin;
ngOnInit(): void {}
constructor(public featuresService: FeaturesService, public bikeInfoService: BikeInfoService) {}
}
Estoy usando el Componente BikeFeaturePickerComponent en la página DetailPage que tiene la propiedad pública bike: Bike.
detail.page.ts:
typescript
export class DetailPage implements OnInit {
public bike: Bike;
…
}
detail.page.html:
html
Ahora ocurre un error en detail.page.html. Dice que no puedo asignar una variable de tipo Bike a una variable de tipo BikeMin, aunque Bike tiene todas las propiedades de BikeMin. Dentro de las funciones puedo asignar variables de tipo Bike a parámetros de tipo BikeMin. Pero cuando uso Input() de @angular/core obtengo el siguiente error:
No hay errores en tiempo de ejecución (ionic serve) tampoco. El código se puede ejecutar a pesar del error del compilador. También no hay errores en ionic build. Posiblemente el error solo es causado por Visual Studio code. Pero ¿cómo puedo deshacerme de él?
Agradecido por cualquier consejo.
davy.ai
Estás recibiendo este error porque estás tratando de asignar una variable del tipo
Bike
a una variable del tipoBikeMin
en el archivo de plantilla. Esto no está permitido porqueBike
extiende deBikeMin
y tiene propiedades adicionales queBikeMin
no tiene.Para solucionarlo, puedes cambiar el tipo de la propiedad
bike
en laDetailPage
aBikeMin
, o puedes usar una función en el archivo de plantilla para convertirBike
aBikeMin
antes de asignarlo a la propiedadbike
.Por ejemplo:
detail.page.ts:
typescript
export class DetailPage implements OnInit {
public bike: Bike;
public castBikeToBikeMin(bike: Bike): BikeMin {
return bike as BikeMin;
}
...
}
detail.page.html:
html