可观察的异步管道

Observable async pipe

我在我的 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 returns 数据并将其记录到控制台,但将其与异步管道绑定到 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);

发生的事情是您的 getMenu 方法中的 dataService.get().subscribe 在异步管道订阅之前完成。所以异步管道永远不会收到主体的排放。如果可能的话,我会避免使用主题,而只是 return 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));
    });
}