角4异步与加载和显示当空

Question

我有一个角部件，其获取喷射的服务CatalogService：

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

的MovieResponseItem是：

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

该服务上属性userCatalog返回Observable<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> 

这明显显示了＃async正在等待数据时的＃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> 

应该做的伎俩。最好使用尽可能少的异步管道，只需将其声明为“as”作为您可以使用的模板变量。否则，流将在每个异步管道中执行一次，这是一种不好的做法，如果这是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>