Визуализировать свойство объекта Observable в шаблоне Angular

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>