Angular 4异步加载和空时显示

Question

我有一个 Angular 组件，它获得了 CatalogServiceinjected 服务：

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

此服务在属性userCatalog 上返回Observable<MovieResponseItem[]>：

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

MovieResponseItem只是一个简单的界面：

export interface MovieResponseItem {
  title: string;
}

现在我想迭代项目并显示加载动画，同时目录查询底层服务的数据（这需要一些时间） - 这很有效。这是使用的模板：

<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>

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

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

• 在等待数据时，显示加载动画
• 如果我们有来自服务的响应并且返回的列表为空，请显示信息文本（如“您的目录为空”）并且不要迭代（因为没有数据）
• 如果我们有来自服务的响应并且返回的列表有值，则迭代项目（与当前状态一样）

我怎样才能做到这一点？根据我在类似帖子上阅读的内容，没有人试图实现这一目标（或者我没有找到）。

非常感谢！

Answer 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>

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

*修改语法错误

Answer 2

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

只需抛出另一个 ngIf - else 条件。

<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>