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 $是可观察的。

使用数组时，例如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对象属性

1 个答案: