我收到“类型错误：无法读取未定义的属性（读取“所有者”）”，因为组件尚未加载可观察对象

Question

虽然出现错误，但应用程序工作正常，但我在控制台中收到该错误，因为我的组件尚未通过 postService 从后端加载“post”可观察值。我的代码是：

组件

export class PostComponent {
  post!: Post;

  constructor(
    activatedRoute: ActivatedRoute,
    private postService: PostService,
    private timeFormatService: TimeFormatService
  ) {
    activatedRoute.params.subscribe((params) => {
      if (params['id'])
        postService.getPostById(params['id']).subscribe((serverPost) => {
          this.post = serverPost;
        });
    });
  }
}

我的 html 仅在段落或标题中显示帖子值，例如 {{post.owner}} 或 {{post.title}}。

我收到每个帖子值的错误。 我想我可以通过更改 post!:Post; 设置默认值来修复此错误至：

post:Post = {owner: '', title: ''}

当 postService 从后端获取真实的帖子详细信息时，它会更新值。我对编码有点陌生，这是正确的方法吗？

Answer 1

使其异步。

post$ = this.activatedRoute.params.pipe(
  map(params => params.id),
  filter(Boolean), 
  switchMap(this.postService.getPostById.bind(this.postService))
);

<ng-container *ngIf="post$ | async as post">
  {{post.title}}
</ng-container>