我有一个Angular组件获取服务CatalogServiceinjected：
export class CatalogListComponent implements OnInit {
catalog$: Observable<MovieResponseItem[]>;
constructor(private catalogService: CatalogService) {}
ngOnInit() {
this.catalog$= this.catalogService.userCatalog;
}
}
此服务返回Observable< MovieResponseItem []>在属性userCatalog上：
@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返回数据,则迭代目录值.
但现在我想把它分成这种行为：
>当我们等待数据时,显示加载动画
>如果我们从服务获得响应并且返回的列表为空,则显示信息文本(例如“您的目录为空”)并且不进行迭代(因为没有数据)
>如果我们从服务获得响应并且返回的列表具有值,则迭代项目(如当前状态)
我怎么能得到这个？从我在类似帖子上看到的,没有人试图实现这一点(或者我没有找到它).
非常感谢！
<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调用.
