在 ngFor 异步中管理 3 个状态

Question

我正在尝试在我的模板中管理 3 种状态：加载、空、错误

我有标准服务：

public getNews(): Observable<News[]> {
return this.http.get<News[]>(`${environment.api}/news`);
}

在组件中，我声明了可观察和错误状态：

ngOnInit() {
this.news$ = this.newsService.getNews()
.pipe(
catchError(err => {
this.loadingError = true;
return throwError(err);
})
);
}

现在在模板中，我订阅了异步的可观察对象，并使用ngIf as管理加载和错误状态

<div class="news-feed" *ngIf="news$ | async as news; else observing">
<div class="item" *ngFor="let item of news; even as even" [ngClass]="{'even' : even }">
<h2>
{{item.title}}
</h2>
</div>
</div>
<ng-template #observing>
<div class="news-feed" *ngIf="!loadingError">
<div class="item">
<h2>Loading</h2>
</div>
</div>
<div class="news-feed" *ngIf="loadingError">
<div class="item">
<h2>Http Error</h2>
</div>
</div>
</ng-template>

对于重复的div，这看起来已经非常笨拙了。如何添加空状态以显示自定义消息？

Answer 1

您可以在 mustache 语法中使用条件来避免重复标记以进行加载和错误。

如果您希望在news数组为空时显示"无新闻"之类的消息，则可以使用NgTemplateOutlet。

<div class="news-feed" *ngIf="news$ | async as news; else observing">
<div class="item" *ngFor="let item of news; even as even" [ngClass]="{'even' : even }">
<h2>
{{item.title}}
</h2>
</div>
<ng-container *ngIf="news.length === 0">
<ng-container *ngTemplateOutlet="observing; context: { $implicit: true }"></ng-container>
</ng-container>
</div>
<ng-template #observing let-empty>
<div class="news-feed">
<div class="item">
<h2>{{loadingError ? 'Http Error' : empty ? 'No New' : 'Loading'}}</h2>
</div>
</div>
</ng-template>

请参阅示例。