I have one situation and i am not sure what is happening, so basically i have two components: parent and child, and my structure looks like this:
in parent component i have some data that is shown on page, and i get that data when page is initialized calling method getPersonData() -> this returns person data from API.
Also in parent component html i have child component where i also need functionality to refresh data in parent component (and to see potential changes reflected on HTML), what i did here is, i passed as @Input param function from parent component and called it from child component when i wanted to refresh page.
parent component method:
getPersonData() {
this.personService.getPersonData(id).then((data) => {
this.personData = data;
console.log(this.personData)
});
}
parrent component html:
<div>
{{person.firstName}} {{person.lastName}}
<child-component [getPersonData]="getPersonData" ></child-component>
</div>
And in child component i have something like this:
@Input() getPersonData: () => void;
savePerson() {
this.personService.savePersonData(personId, this.personPayload).subscribe(
() => {
this.getPersonData();
});
}
And now weird thing happens: in console log and network tab i see that API CALL is made, and i see changes there, but my html remains with old data, that is what i do not understand, console log data is not same like html data, console log and everything is in parent component. Can anyone help me to understand what is happening here, what i am missing ? What is main reason html is not refreshed, it looks like personData that is called from parent component is not same parentData that is called with callback function from child component...
use @output for know the parent to call get functions after save made from child component, it's like informing parent to do call when required
<child-component [getPersonData]="getPersonData" (getevent)="getPersonData()"></child-component>
child.component
@output getevent = new EventEmitter();
savePerson() {
this.personService.savePersonData(personId, this.personPayload).subscribe(
() => {
this.getevent.emit('');
});
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments