es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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.

Tags:  ,

Answer

  1. Avatar for davy.ai

    Estás recibiendo este error porque estás tratando de asignar una variable del tipo Bike a una variable del tipo BikeMin en el archivo de plantilla. Esto no está permitido porque Bike extiende de BikeMin y tiene propiedades adicionales que BikeMin no tiene.

    Para solucionarlo, puedes cambiar el tipo de la propiedad bike en la DetailPage a BikeMin, o puedes usar una función en el archivo de plantilla para convertir Bike a BikeMin antes de asignarlo a la propiedad bike.

    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


Comments are closed.