angular - 在 Angular 模板中渲染 Observable 对象属性

Question

我有以下 Angular 7 组件:

export class PostComponent implements OnInit {

  post$: Observable<PostModel>;

  constructor(private postService: PostService) { }

  ngOnInit() {

    this.post$ = postService.getPostById(25);

  }

}

在组件模板上我使用了以下内容:

<p>Title: {{post$.title}}</p>

标题显示为空，我认为是因为 post$ 是 Observable。

当使用数组时，例如posts$: Observable<PostModel[]>我将 observable 传递给模板，使用 ngFor 可以正常工作.

但是在这种情况下我应该怎么做呢？

可通过数组观察

当使用数组的 Observable 时，我在 HTML 模板中有以下内容:

<div *ngIf="(posts$ | async)?.length > 0; else loading">
  <ng-container *ngFor="let post of posts$ | async">
    {{post.title}}
  </ng-container>
</div>
<ng-template #loading>
  Loading ...
</ng-template>

这允许我在加载时显示加载消息。

Answer 1

你必须使用异步管道:

<p>Title: {{(post$ | async).title}}</p>