angular - 在 Angular2 中，您如何检测过滤器/管道未返回任何结果

Question

我想在过滤器返回空数组时显示一条消息，例如“没有找到结果”

这是我的带有过滤器的 ngFor 列表

 <li class="col-xs-12" *ngFor="let item of jobs | jobsFilter: [originalJobList, region, county, type]"></li>

<p>No results found</p>

如果没有过滤器很容易，但是因为有过滤器我不知道怎么说过滤器没有返回结果。

这是我的过滤器:

import { Pipe } from "@angular/core";

@Pipe({
  name: 'jobsFilter',
  pure: true
})

export class JobsFilter {
   transform(items: any, [originalList, region, county, type]: any) {
      //Filter options:
        var overallResults = originalList;
        var filterByRegion = false;
        var filterByCounty = false;
        var filterByType = false;

        if (region !== "Filter by Region") filterByRegion = true;

        if (county !== "Filter by County") filterByCounty = true;

        if (type !== "Filter by Type") filterByType = true;

        if (filterByType) overallResults = overallResults.filter(item => item.type === type);

        if (filterByRegion) overallResults = overallResults.filter(item => item.region === region);

        if (filterByCounty) overallResults = overallResults.filter(item => item.county === county);

        return overallResults;
  }
}

This all works but I just need to show the users that there filter return no results with a message rather than empty screen.

Answer 1

阅读以下帖子:

https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213

片段:

<ng-container *ngIf=”(items | filter:search.value) as result”>

  <div *ngFor=”let item of result”>
    {{item}}
  </div>

  <p>Count: <b>{{result.length}}</b></p>

</ng-container>