在 Angular 7 中添加没有额外变量的加载消息答案

【问题标题】：Add a Loading message without an extra variable in Angular 7在 Angular 7 中添加没有额外变量的加载消息
【发布时间】：2019-06-08 10:47:59
【问题描述】：

我在 Angular 7 中有以下服务方法：

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>

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

如果不在我的组件上使用额外的变量，这是否可能？

【问题讨论】：

是的，有可能。未定义帖子时显示消息。
不使用“额外”（不是）变量的原因是什么？

标签： angular angular7

【解决方案1】：

您不能初始化posts: PostModel[] 并使用<div *ngIf="!posts" >loading...</div>。同样正如 Osakr 在 cmets 中指出的那样：将 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>

【讨论】：

如果您请求数据失败怎么办，那么帖子将保留undefined，并且您将拥有一个很酷的微调器，直到永远
可以在订阅error => { this.posts = []; }的onError中设置posts为[]
最后与拥有 isLoading 变量相同。（我不想粗鲁，只是想让帖子的创建者意识到有一个用于加载目的的变量也不错）。你的回答很好，无论如何你应该添加更多信息我猜
没错，如果有多个人在处理相同的代码，loading 变量也会更清晰。我会在答案中添加更多信息。

【解决方案2】：

不知道如何将其标记为骗子，因此我在此处发布了类似问题的链接作为答案Angular 4 async with loading and display when empty。

你必须更新你的 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>

【讨论】：