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

这一切都有效，但我只需要向用户显示，过滤器没有返回结果，而是返回消息，而不是空屏幕。

Answer 1

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

<p *ngIf="!(jobs | jobsFilter: [originalJobList, region, county, type]?.length)">No results found</p>

Answer 2

阅读以下帖子：

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

片段：

html prettyprint-override"><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>