Angular 4 异步加载和空时显示 [英] Angular 4 async with loading and display when empty

问题描述

我有一个 Angular 组件，它注入了一个服务 CatalogService:

导出类 CatalogListComponent 实现 OnInit {catalog$: Observable;构造函数(私有目录服务:目录服务){}ngOnInit() {this.catalog$ = this.catalogService.userCatalog;}}

此服务在属性 userCatalog 上返回一个 Observable:

@Injectable()导出类 CatalogService {get userCatalog(): Observable{返回 this._userCatalogSubject.asObservable();}}

MovieResponseItem只是一个简单的界面:

导出接口 MovieResponseItem {标题:字符串；}

现在我想迭代项目并显示加载动画，同时目录查询基础服务的数据(这需要一些时间) - 这是有效的.这是使用的模板:

<ng-container *ngFor="let item of catalog$ | async"><div>{{item.title}}</div><ng-容器>
<ng-template #loading>加载动画...</ng-template>

这显然会在异步等待数据时显示#loading 模板.如果 observable 返回数据，它会遍历目录值.

但现在我想把它分成这种行为:

• 在我们等待数据时，显示加载动画
• 如果我们收到来自服务的响应并且返回的列表为空，则显示信息文本(例如您的目录为空")并且不要迭代(因为没有数据)
• 如果我们有来自服务的响应并且返回的列表有值，则迭代项目(如当前状态)

我怎样才能做到这一点?从我在类似帖子中读到的内容来看，没有人试图实现这一目标(或者我没有找到).

非常感谢！

解决方案

 <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-容器><ng-template #noItems>没有项目！</ng-template>

<ng-template #loading>加载动画...</ng-template>

这应该可以解决问题.最好尽可能少地使用异步管道，并将其声明为作为"模板变量，您可以在任何地方使用.否则，每个异步管道将执行一次流，这是一种不好的做法，如果这是 http 支持的，则可能会创建不需要的 http 调用.

*编辑语法错误

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!

解决方案

 <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

这篇关于Angular 4 异步加载和空时显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！