How to show properties of a class on HTML?

Ionic Framework ionic-v3
1

Hello!

I have too many problems (I’m newbie at this subject) showing properties of a class on HTML, always give me the error “Cannot read property of XXXXXX undefined” and its getting me off… let me show you my code:

on html:

{{ vehicle.platenumber }}
{{ vehicle.brand }}
{{ vehicle.model }}

on ts:

export class HomePage implements OnInit {

  private newVehicleParams: string;
  public vehicle: any;

  ngOnInit(): void {
    this.newVehicleParams = this.params.get('newVehicleParams');
  }

  motolog$: Observable<any>;
  vehi$: Observable<Vehicle>;

  constructor(
    public navCtrl: NavController,
    private motolog: MotoLogService,
    private params: NavParams,) {
      this.vehi$ = this.motolog.getVehicle(this.newVehicleParams);
})
}

on motologservice:

    getVehicle(vehicleKey: string) {
        return this.db.list(`vehicles/${vehicleKey}`);
    }

I’m creating on the page from before, a vehicle on the DB of Firebase (it’s succesful), but what I don’t know how to do, is to get the vehicle key, and then use in the next page, at html: the platenumber, brand and model.

Thank you so much

2 
//declare public vehicle: any = [];
{
      //this.vehi$ = this.motolog.getVehicle(this.newVehicleParams);
      this.vehicle = this.motolog.getVehicle(this.newVehicleParams);
      console.log(this. vehicle);
}

can you check, what the output you got on console for this.vehicle

3

I’ve told you that the error i cannot deal with is because of “this.vehicle” it says

"Type 'AngularFireObject&lt;{}&gt;' is missing the following properties from type 'Vehicle': platenumber, brand, modelts(2739)"

How to deal with that? Thanks

4

You never set vehicle… hence the reason it is “Undefined”. vehi$ is an observable … … and you have to watch for data coming into an Observable… it is NOT data … but a watcher of data (if that makes sense). So like

 this.vehi$.subscribe(data => {
   this.vehicle = data;
});