在 Angular 模板中渲染 Observable object 属性

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[]> 我将可观察对象传递给模板，使用 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>

在 Angular 模板中渲染 Observable object 属性

Render a Observable object property in Angular template

angular

angular-observable

angular7