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

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

这是我的带有过滤器的 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.

最佳答案

阅读以下帖子:

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>

https://stackoverflow.com/questions/40564312/

相关文章:

python - 阅读 Pandas 数据框时跳过包含特定值的特定行

git - 我需要做一个 Git 克隆吗?

SQL Server - 如果列包含值,则按 ID 分组

python - 在 Python 中将纳秒转换为时间戳

javascript - 如何将 JSON/Bootstrap-Table 中的日期转换为 DD/M

r - 使用 R 和 dplyr 扩展和离散化时间序列数据

batch-file - 为什么不使用批处理文件中的 RMDIR 作为最后一个命令删除文件夹?

oop - 开闭原则与多态性

intellij-idea - 使用 Maven 项目创建测试类时,intellij 无法创建类文件

cordova - 内容安全策略 Cordova 问题