可观察到的异步管道

Question

我使用以下方法在AppComponent中附加一个Observable（menuitems $）：

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

在AppComponent的.ts文件中，创建可观察的菜单项：

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

在我的AppComponent的.ts文件中，我再次使用以下命令进行订阅：

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

.subscribe返回数据并将其登录到控制台，但是使用Async-pipe将其绑定到H2标签（也尝试使用其他标签）不会在屏幕上呈现h2标签。 没有（控制台）错误输出。

我的MenuService看起来像这样：

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);
}

更新：当我删除subscribe（）时它可以工作，但是仍然找不到为什么不能通过subscribe（）和模板绑定来订阅相同的可观察对象。 因此，使用下面的代码是可行的，但是为什么它必须是单独的Observable？

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

Answer 1

发生的事情是您的getMenu方法中的dataService.get().subscribe在异步管道订阅之前完成。 因此，异步管道永远不会收到对象的发射。 如果可能的话，我会避免使用该主题，而只是返回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));
    });
}