异步管道在非常简单的 Angular 应用程序中不起作用答案

【问题标题】：Async pipe does not work in a very simple Angular app异步管道在非常简单的 Angular 应用程序中不起作用
【发布时间】：2019-04-13 14:49:28
【问题描述】：

首先，我在 Stackblitz https://stackblitz.com/edit/angular-th31vj 上有一个示例，您可以在其中查看我的应用。

这是一个非常简单的应用程序，我有一个服务（StoreService）以 RxJS 方式管理数据和 2 个组件：AppComponent 和 Catalog 组件。 AppComponent 包含类别列表和路由器插座。我还想在类别列表下显示当前类别。

这就是我的 AppComponent 的样子

<h3>Categories</h3>
<ul>
  <li *ngFor="let category of store.categories$ | async">
    <a [routerLink]="['/catalog', category.id]">{{ category.name }}</a>
  </li>
</ul>
<p> Selected category: {{ store.selectedCategory$.name | async }} </p>
<router-outlet></router-outlet>

import { Component, OnInit } from '@angular/core';

import { StoreService } from './store.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular';

  constructor(public store: StoreService) {}

  ngOnInit() {
    this.store.selectedCategory$.subscribe(category => console.log('App component received new category', category));
  }
}

由于某种原因 selectedCategory$ 没有显示在页面上，但是我可以在控制台中看到它。我会很高兴有任何帮助。谢谢。

【问题讨论】：

你的管道放错地方了，需要解析observable然后得到结果的名字。

标签： javascript angular

【解决方案1】：

您需要将async 管道应用于可观察对象并然后从中获取名称：

{{ (store.selectedCategory$ | async).name }}

更新 StackBlitz：https://stackblitz.com/edit/angular-av1pbn

【讨论】：