Angular 6 On component initialization, no data from subscribe, on second component load is ok, on every next is strange

Question

In this link is code with part of my application: stackblitz.com/edit/angular-wfpjb8 . This show, what is my problem. (pay attention on console.log in console)

SHORT DESCRIPTION: In Angular 6 I have component search, where I have input. When I press ENTER, get some data from DB in httpService service:

keyDownFunction(event){
    if(event.keyCode == 13) {
        this.httpService.searchPoint().subscribe(
        points => {
          this.mapService.setSearchPoints(points);
          this.router.navigate(['/home/search/']);
        });
    }
}

From backend I receive some of data in format: [{}, {}, {}, {}...] and this data I send throught mapService to component ResultComponent, where I want to display this data. mapService:

setSearchPoints(points){
    this.pointList.next(points);
}
getSearchPoints(){
    return this.pointList.asObservable();
}

Component ResultsComponent, where I subscribe data from service and want to display data.

export class ResultsSearchComponent {
    points;
    constructor(private mapService: MapService) {
    this.mapService.getSearchPoints().subscribe((points) => {
        console.log('1: ', points);
        this.points = points;
    });
    console.log('2: ', points);
}

PROBLEM:

When I first time set data from backend, console.log 1 doesn't execute (so my data from backend won't be written) and console.log 2 execute undefined - I want to see data from DB immediately
When I second time set data from backend (when component ResultsComponent exist) console.log 1 write correct data from backend, and console.log 2 doesn't execute. (all works good)
When I close this component and set data from backend one more time console.log 1 write correct data (but this execute is from the last one set), but 2 doesn't execute.
When I close this component one more time, console.log 1 write twice, when I close one more time execute three times, four times, five times and so on...

I really don't understand why it works like this, because in my mind, it should work properly Please, tell me, what I am doing in the wrong way.

Your implementation of the `MapService` has issues. Why exactly are you using the `MapService`? Is this `points` data something that you're leveraging in multiple components? If so, do you want to show the `points` data in all those components? Meaning, do you want all these components to get notified when the latest points have been retrieved? — SiddAjmera, Dec 09 '18 at 19:55
I use this data only once, in ResultsComponent. I have to use mapService, because I get data in searchComponent, but want to write this data in ResultsSearchComponent. So I want to send data from SearchComponent to ResultsSearchComponent — Paulina Półchłopek, Dec 09 '18 at 20:13

score 0 · Answer 1 · answered Dec 09 '18 at 22:49

0

Your question is still very vague. A lot depends on how you structure your app, what components are on what pages, where are your services injected and so on.

Anyway, I have a working example for You on stackblitz. I tried naming methods and components/services so they resemble what you mentioned.

Let me know if this helped.

answered Dec 09 '18 at 22:49

bodorgergely

558
1
3
12

Your example works good, but my application is quite complicated, I did something similar there: https://stackblitz.com/edit/angular-wfpjb8 . In my opinion It should work as in Your example, but it isn't - pay attention on console.log – Paulina Półchłopek Dec 10 '18 at 09:59
Use a `BehaviorSubject` as I did, and it will work. Look here for difference: https://stackoverflow.com/questions/43348463/what-is-the-difference-between-subject-and-behaviorsubject – bodorgergely Dec 11 '18 at 07:40

Angular 6 On component initialization, no data from subscribe, on second component load is ok, on every next is strange

1 Answers1