Добавить загрузочное сообщение без дополнительной переменной в Angular 7

Question

У меня есть следующий метод обслуживания в 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>

Это работает, но я хотел бы отобразить «Загрузка» во время загрузки данных.

Возможно ли это без использования дополнительной переменной в моем компоненте?

Answer 1

Не уверен, как пометить это как дублирование, поэтому я выкладываю ссылку на похожий вопрос в качестве ответа здесь Асинхронная угловая 4 с загрузкой и отображением, когда пусто .

Вы должны обновить свою наблюдаемую систему, чтобы использовать асинхронный канал, хотя это будет примерно так:

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>

Answer 2

Вы не можете инициализировать posts: PostModel[] и использовать <div *ngIf="!posts" >loading...</div>. Также, как указал Осакр в комментариях: установите 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>