After transitioning my data from an object in a service to a database connection, I'm facing issues where the data is not reaching the component as expected.
To solve this problem, I have set up the service to subscribe to the data retrieved from the database using the following code:
public setPerson(ac: string): void{
console.log(ac);
this.generatePerson(ac).subscribe((data) => {
// this.mapPersonFromInput(data[0]);
console.dir(data);
});
}
The mapPersonFrominput() function was originally used for mock data and needs to be updated to work with actual database input.
The generatePerson function retrieves the person data from the API like this:
public generatePerson(id: string):Observable<Person>{
var datRetUrl: string = '/api/'
var fullUrl: string = datRetUrl + id;
return this.http.get(fullUrl)
.map(this.extractData)
.catch(this.handleError);
}
The extractData function assigns values from the input object to the service's structure, while handleError logs errors to the console.
I initialize the data object in the service before the component loads by calling the passCodeToService function from a navigation component:
passCodeToService():void{
this.psn.setPerson(this.accessCode);
this.route.navigate(['/name']);
}
In the component that should display the data, I currently use ngOnInit but suspect ngOnChanges might be more appropriate. Here's the code snippet I'm struggling to fix:
ngOnInit() {
this.name = this.psn.getName();
console.log(this.name);
}
The getName function simply returns the stored object from the service.
public getName(): Name{
return this.servicePerson.name;
}