角度5显示“未找到数据".如果结果为空 [英] Angular 5 show "No data found" on ngIf empty results
问题描述
我正在使用Angular 5,并且正在构建带有一些用于过滤列表的按钮的项目列表.我正在努力做的是,当其中一个过滤器隐藏列表的每一项时,显示一条找不到数据"的消息.
I'm using Angular 5 and I'm building a list of items with some buttons that filter the list. What I'm struggling to do is show a "No data found" kind of message when one of those filters hide every item of the list.
基本上是这样:
过滤器按钮
<div padding>
<ion-segment [(ngModel)]="filter" (ionChange)="onFilterChange()">
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="2">
Pending
</ion-segment-button>
<ion-segment-button value="1">
Confirmed
</ion-segment-button>
</ion-segment>
</div>
列表
<ion-list *ngFor="let r of (reservations | async)">
<ion-card *ngIf="(filter == 'all' || filter == r.confirmed)">
<ion-item>
Item
</ion-item>
</ion-card>
</ion-list>
注意:我使用的是异步管道,因为数据来自Firebase实时数据库.
因此,我的所有项目都处于待处理状态(已确认:2),因此,当我单击已确认"按钮时,列表上的所有项目都被隐藏了,这是完美的.但是,如何显示找不到数据"消息而不是空列表?
So, all my items are in a state of pending (having confirmed: 2), so when I click on the Confirmed button, all the items on the list get hidden, which is perfect. But how can I show a "No data found" message instead of an empty list?
我尝试了else条件,但是我收到多条找不到数据"消息(每个隐藏项一个):
I've tried the else condition, but I'm getting multiple "No data found" messages (one for each hidden item):
<ion-list *ngFor="let r of (reservations | async)">
<ion-card *ngIf="(filter == 'all' || filter == r.confirmed); else empty;">
<ion-item>
Item
</ion-item>
</ion-card>
</ion-list>
<ng-template #empty>
No data found...
</ng-template>
那么实现这一目标的正确方法是什么? 谢谢.
So what's the correct way of achieving this? Thanks.
推荐答案
IMO,您不应该显示原始保留列表.而是显示已过滤的列表:
IMO you shouldnt display the raw list of reservations. Instead, display the already filtered list:
component.html
component.html
<ion-segment [formControl]="status" (ionChange)="onFilterChange()">
<ion-segment-button value="2">
Pending
</ion-segment-button>
<ion-segment-button value="1">
Confirmed
</ion-segment-button>
</ion>
<div *ngIf="empty$ | async; else notEmpty">
Nothing
</div>
<ng-template #notEmpty>
<ion-list *ngFor="let reservation of reservations$ | async">
<ion-card>
<ion-item>
Item
</ion-item>
</ion-card>
</ion-list>
</ng-template>
component.ts
component.ts
import {combineLatest} from 'rxjs/observable/combineLatest';
import {FormControl} from '@angular/forms';
status= new FormControl;
reservations$: Observable<IReservation[]>;
empty$: Observable<boolean>;
constructor(){
this.reservations$ = combineLatest(rawReservations$,this.status.valueChanges,this._applyFilter);
this.empty$ = this.reservations$.map(reservations => reservations.length === 0);
}
private _applyFilter(reservations: IReservation[], status: number): IReservation[]{
let result = reservations;
//apply filter logic
return result;
}
这篇关于角度5显示“未找到数据".如果结果为空的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!