Angular 4 * ngFor带管道的阵列长度

Question

我的应用中有一个范围滑块。如果拖动范围滑块，则会根据“sliderPipe”更改结果。我的问题是我无法显示“找不到记录”消息。

html模板

<div class="well" *ngFor="let data of onewayFormData$ | 
                                  sliderPipe: sliderValue as results;">
  <div class="row">
    <div class="col-md-6 onewayresults">
      <h2> {{ data.cost | currency: 'INR':true }} </h2>
      <h3> {{ data.agencycode }} </h3>
      <h5> {{ data.ocity }} > {{ data.dcity }}</h5>
      <h5> Depart: {{ data.depart }} </h5>
      <h5> Arrive: {{ data.arrive }} </h5>
    </div>
    <div class="col-md-6">
      <div style="float:right;">
        <img [src]="data.imageurl" width="120px" height="100px" [alt]="data.agency" />
        <br/>
        <br/>
        <button class="btn btn-success"> Book Tickets </button>
      </div>
    </div>
  </div>
  Length: {{ results }}
  <div class="well" *ngIf="results.length == ''">
    <div class="alert alert-danger"> No Results Found....... </div>
  </div>
</div>

管道代码

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sliderPipe'
})
export class SliderPipePipe implements PipeTransform {
  transform(value, args ? ) { // ES6 array destructuring
  console.log('Arguments: ' , value.length);
  return value.filter(data => {
      return data.cost >= args;
    });
  }
}

Answer 1

如果results是一个数组：

数组的长度始终为number类型，因此您需要针对results.length == 0检查空数组。

如果results的类型为：

检查results == 0。