Angular render html before rxjs response-CodePudding

I want to show some html code based on response,but HTML render before receive response.

Html:

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

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

Ts:

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

medias: Array<T> = [];

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

According to the code above firstly show "some other text" and after receive response,show "some text"

I trying to handle with skip() and skipWhile() but nothing change.

CodePudding user response：

Multiple problems here.

First, use RxJS to its full potential. Then, use Angular to its full potential too. Finally, use the correct conditions to make it all work.

<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();
}