Angular 5 在 ngIf 空结果上显示 "No data found"

Question

我正在使用 Angular 5，我正在构建一个项目列表，其中包含一些用于过滤列表的按钮。当其中一个过滤器隐藏了列表中的每一项时，我正在努力做的是显示一条 "No data found" 类消息。

基本上是这样的：

过滤器按钮

<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），所以当我点击确认按钮时，列表中的所有项目都被隐藏了，这很完美。但是如何显示 "No data found" 消息而不是空列表？

我已经尝试了 else 条件，但我收到多条 "No data found" 消息（每个隐藏项一条）：

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

那么实现这一目标的正确方法是什么？谢谢。

Answer 1

试试这个方法，告诉我它是否适合你。

分量：

// control variable
  dataAvailable = false;

  onFilterChange(filterType: number) {
    // your code and logic

    // This is pretty ugly, make it prettier please...    

    // checking if exists at least 1 reservation with confirmed = 1 | 2 (depends on argument).
    this.dataAvailable = this.reservations.filter(res => res.confirmed === filterType).length > 0;
  }

模板：

<div *ngIf="dataAvailable; then printData else empty"></div>

<ng-template #printData>
  <ion-list *ngFor="let r of (reservations | async)">
      <ion-card>
          <ion-item>
              Item
          </ion-item>
      </ion-card>    
  </ion-list>
</ng-template>
<ng-template #empty>
    No data found...
</ng-template>

所以，我的想法是，首先我们检查是否值得 遍历模板中的数据。我们在组件中检查它，我们看看它是否存在任何具有过滤值的保留。

如果不存在，则不循环，直接显示（无数据）。如果它确实存在，我们将循环并打印它们...

有道理吗？希望它对您有所帮助，或者至少为您指明了正确的方向！

Answer 2

IMO 你不应该显示原始的预订列表。相反，显示已经过滤的列表：

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

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

Angular 5 在 ngIf 空结果上显示 "No data found"

Angular 5 show "No data found" on ngIf empty results

javascript

angular-ng-if

angular