在 Angular 7 中添加不带额外变量的加载消息

Question

我在Angular7有如下服务方式：

public getTopPosts(): Observable<Payload<PostResponse>> {

  return this.httpClient.get<Payload<PostResponse>>('/top-posts');

}

在我拥有的组件上：

export class TopPostsComponent implements OnInit {

  posts: PostModel[] = [];

  constructor(private postService: PostService) { }

  ngOnInit() {
    this.getPosts();
  }

  getPosts() {

    this.postService.getTopPosts().subscribe((payload: Payload<PostResponse>) => {

      this.posts = payload.map((response: PostResponse) => { 
        return {
          id: response.id, 
          title: response.title
        };
      });

    });

  }
}

组件 HTML 是：

<div *ngFor="let post of posts">
  {{post.title}}  
</div>

它正在工作，但我想在加载数据时显示 "Loading"。

这是否可以在我的组件上不使用额外变量的情况下实现？

Answer 1

您不能初始化 posts: PostModel[] 并使用 <div *ngIf="!posts" >loading...</div>。正如 Osakr 在评论中指出的那样：将 this.posts 设置为 []，否则如果调用失败它将继续加载。

您的新代码如下所示：

export class TopPostsComponent implements OnInit {

  posts: PostModel[];

  constructor(private postService: PostService) { }

  ngOnInit() {
    this.getPosts();
  }

  getPosts() {

    this.postService.getTopPosts().subscribe((payload: Payload<PostResponse>) => {

      this.posts = payload.map((response: PostResponse) => { 
        return {
          id: response.id, 
          title: response.title
        };
      },
      error => { this.posts = [] }
      );

    });

  }
}

而 HTML 是：

<div *ngIf="!posts">
  loading...
</div>
<div *ngFor="let post of posts">
  {{post.title}}  
</div>

Answer 2

不确定如何将此标记为骗局，因此我将 link 发布到类似问题作为答案。

你必须更新你的 observable 才能使用异步管道，所以它会是这样的：

export class TopPostsComponent implements OnInit {

  posts$: Observable<PostModel[]>;

  constructor(private postService: PostService) { }

  ngOnInit() {
    this.getPosts();

    this.posts$ = this.postService.getTopPosts().pipe(
      map((payload: Payload<PostResponse>) => {
        return payload.map((response: PostResponse) => { id: response.id, title: response.title});
      })
    );
  }

}


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

在 Angular 7 中添加不带额外变量的加载消息

Add a Loading message without an extra variable in Angular 7

angular

angular7