Angular 4 async with loading and display when empty

问题

I have an Angular component that gets a service CatalogServiceinjected:

export class CatalogListComponent implements OnInit {
  catalog$: Observable<MovieResponseItem[]>;
  constructor(private catalogService: CatalogService) {}
  ngOnInit() {
    this.catalog$ = this.catalogService.userCatalog;
  }
}

This service returns an Observable<MovieResponseItem[]> on property userCatalog:

@Injectable()
export class CatalogService {
  get userCatalog(): Observable<MovieResponseItem[]> {
    return this._userCatalogSubject.asObservable();
  }
}

The MovieResponseItemis just a simple interface:

export interface MovieResponseItem {
  title: string;
}

Now I want to iterate the items and display a loading animation while the catalog queries the underlying service for data (that takes some time) - this works. This is the template used:

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

This obviously displays the #loading template while the async is awaiting data. If the observable returns data, it iterates over the catalog values.

But now I want to separate this into this behaviour:

while we await data, display the loading animation
if we have a response from the service and the returned list is empty, show an information text (like "your catalog is empty") and do not iterate (as there is no data)
if we have a response from the service and the returned list has values, iterate the items (as in current state)

How can I achive this? From what I read on similiar posts nobody tried to achieve that (or I did not find it).

Thanks a lot!

回答1:

 <div *ngIf="catalog$ | async as catalog; else loading">
  <ng-container *ngIf="catalog.length; else noItems">
    <div *ngFor="let item of catalog">{{item.title}}</div>
  </ng-container>
  <ng-template #noItems>No Items!</ng-template>
 </div>
 <ng-template #loading>loading animation...</ng-template>

This should do the trick. Better to use as few async pipes as possible and just declare it "as" a template variable you can use where ever. Otherwise the stream will be executed once per async pipe which is a bad practice and could create unneeded http calls if this is http backed.

*edit for the syntax error

回答2:

hmmm.. https://github.com/angular/angular/issues/14479

Just throw in another ngIf - else condition.

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

来源：https://stackoverflow.com/questions/46434313/angular-4-async-with-loading-and-display-when-empty

标签

angular

async-await