Observable async pipe

Question

I'm attaching an Observable (menuitems$) in my AppComponent using:

<h2 *ngFor="let menuitem of menuitems$ | async">DEFAULT TEXT</h2>

In my AppComponent's .ts file I create the menuitems Observable:

this.menuitems$ = this.wordPressMenuService.getMenu(2).map(m => m.items);

And in my AppComponent's .ts file I subscribe again using:

this.menuitems$.subscribe(menuitems => { console.log(menuitems); });

The .subscribe returns data and logs it into the console, but binding it with the Async-pipe to the H2-tag (also tried different tags) does not render the h2-tags on the screen. No (console) error output.

My MenuService looks like this:

protected readonly menus$ = new Subject<WordPressMenu>();

constructor(private dataService:DataService) { }

getMenu(id:number) : Observable<WordPressMenu> {
    this.dataService.get<WordPressMenu>(AppSettings.WP_MENU_ENDPOINT + id).subscribe(data => {
        this.menus$.next(data);
    });
    return this.menus$.filter(m => m.ID == id);
}

Update: It works when I remove the subscribe(), but still didn't find out why you can't subscribe to the same observable with subscribe() and template-binding. So using the code below works, but why does it have to be a seperate Observable?

this.menuitems1$ = this.wordPressMenuService.getMenu(2).map(m => m.items);
this.menuitems2$ = this.wordPressMenuService.getMenu(2).map(m => m.items);

Define does not work. What are you observing while you are debugging? — Igor
The only thing I can see is that the h2-tags are not being rendered. Using the async-pipe and .subscribe() should do the same thing, but in this case it does not. .subscribe() works, the async-pipe doesn't do anything. — Erwin Okken
have you tried having the async pipe by itself? no subscribe. — Anjil Dhamala
Interesting. Removing the (seperate) subscribe fixes it. But the whole point of having observables is to have them on multiples places in your application, isn't it? And I need this seperate subscribe() for different functionality. — Erwin Okken

LLai LLai · Accepted Answer · 2018-01-23T14:45:16

What is happening is your dataService.get().subscribe in your getMenu method is finishing before the async pipe subscribes. So the async pipe never receives the subject's emissions. If possible, I would avoid using the subject and just return the get observable

getMenu(id:number) : Observable<WordPressMenu> {
    return this.dataService.get<WordPressMenu>(AppSettings.WP_MENU_ENDPOINT + id)
        .map(data => data.filter(m => m.ID == id));
    });
}

Observable async pipe

1 Answers