Currently, I am facing a challenge in my HTML page. My objective is to utilize an object by fetching it from my API and storing it in a variable for future data manipulation. The API functions properly, as it returns the Parking object with all the necessary data displayed when logged. However, upon attempting to assign this object to a variable and logging that variable, it displays UNDEFINED.
export class ParkingdetailsComponent implements OnInit {
parking: Parking;
id: number;
constructor(
private _route: ActivatedRoute,
private _pds: ParkingDataService) { }
ngOnInit(): void {
this._route.paramMap.subscribe(params =>{
this.id = parseInt(params.get('id'));
});
this._pds.getParking$(this.id).subscribe((parking: Parking) =>{
console.log(parking); //logs the Parking object
this.parking = parking;
});
console.log(this.parking) //logs UNDEFINED
}
}
After some troubleshooting, I managed to solve my issue. Surprisingly, the problem did not lie within the subscription part, which was functioning correctly. Instead, the error resided in my HTML code where I accessed the object's data using {{ parking.name }} instead of {{ this.parking.name }}. The addition of "this." rectified the problem immediately.
I'm sharing this insight for anyone else who might encounter a similar obstacle.