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

Question

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

这是一个非常简单的应用程序，其中有一个服务（StoreService）以RxJS方式管理数据和2个组件：AppComponent和Catalog Component。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 $没有显示在页面上，但是我可以在控制台中看到它。我会很高兴为您提供任何帮助。谢谢。