在 rxjs 响应之前进行 Angular 渲染 html

Question

我想显示一些基于响应的 html 代码，但在接收响应之前渲染 HTML。

网页：

 <div *ngIf="medias.length > 0">
    some text
 </div>

<div *ngIf="!medias.length > 0">
    some other text
</div>

时间：

ngOnInit(): void {
    this.getMedias();
}

medias: Array<T> = [];

getMedias() {
   this.controllerApiService
   .getById()
   .subscribe(data => {
     this.medias = data
   });
}

根据上面的代码，首先显示“一些其他文本”，收到响应后，显示“一些文本”

我尝试使用skip()和skipWhile()来处理，但没有任何改变。

Answer 1

这里有多个问题。

首先，充分发挥 RxJS 的潜力。然后，充分发挥 Angular 的潜力。最后，使用正确的条件使其一切正常。

<ng-container *ngIf="medias$ | async as medias">

  <div *ngIf="medias.length; else noMedia">
    Some media : {{ medias.length }}
  </div>

  <ng-template #noMedia>
    No media
  </ng-template>

</ng-container>

medias$ = this.getMedias().pipe(shareReplay(1));

getMedias() {
  return this.controllerApiService.getById();
}