可观察的异步管道

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

Answer 1

发生的事情是您的 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));
    });
}

可观察的异步管道

Observable async pipe

angular

asynchronous

ionic3

observable

angular-pipe