Angular 内置了一些管道,比如 DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe 和 PercentPipe。 它们全都可以直接用在任何模板中;但是在angular(angular2)中由于性能的原因官方没有提供有关筛选和排序的管道,于是当我们在使用*ngFor需要筛选数据时可以自定义筛选管道。

  • in component
filterargs = {title: 'hello'};
items = [{title: 'hello world'}, {title: 'hello kitty'}, {title: 'foo bar'}];
  • in template
<li *ngFor="let item of items | myfilter:filterargs">
  • in pipe
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'myfilter',
pure: false
})
export class MyFilterPipe implements PipeTransform {
transform(items: any[], filter: Object): any {
if (!items || !filter) {
return items;
}
// filter items array, items which match and return true will be
// kept, false will be filtered out
return items.filter(item => item.title.indexOf(filter.title) !== -1);
}
}
  • in app.module.ts; you no longer need to register the pipes in your @Component
import { MyFilterPipe } from './shared/pipes/my-filter.pipe';

@NgModule({
imports: [
..
],C
declarations: [
MyFilterPipe,
],
providers: [
..
],
bootstrap: [AppComponent]
})
export class AppModule { }

参考链接:

https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor

在angular中自定义筛选管道的更多相关文章

  1. angular中自定义依赖注入的方法和decorator修饰

    自定义依赖注入的方法 1.factory('name',function () { return function(){ } }); 2.provider('name',function(){ thi ...

  2. C# Winform中自定义筛选及自带统计行的Datagridview控件

    网上分享有很多种自制DGV控件,都有不小的缺陷. 没办法,按需求自己定制了一个. 一.过滤方面类似于Excel的筛选功能.支持右键菜单筛选,同时也支持在文本框输入文字按焦点列进行筛选: 二.统计行我采 ...

  3. angular中transclude的理解

    今天被这个transclude搞糊涂了,弄了半天,才知道原来使用起来很简单.很烦恼为社么书中的对于这个的介绍这么晦涩难懂.直到看到了这篇文章,才让我弄清楚了. 一.transclude介绍 trans ...

  4. 在angular7中创建组件/自定义指令/管道

    在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...

  5. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  6. 【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例

    目录 一. 划重点 二. Angular应用中的Http请求 三. 使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 3.2 常见的操作符 四. 冷热Observable的两种典型场景 4 ...

  7. angular2+ 自定义pipe管道实例--定义全局管道及使用

    首先到项目目录下ng g pipe pipe/myslice 就会在app目录下生成一个pipe文件夹文件夹下有myslice.pipe.ts文件,如果没有也可以自己手动新建 然后需要再app.mod ...

  8. Angular中innerHTML标签的样式不起作用详解

    1.背景 在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: //HTML部分 <div class="contents" [inner ...

  9. Angular中ngCookies模块介绍

    1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...

随机推荐

  1. uploadify ASP.net 使用笔记

    <script type="text/javascript" src="jquery.uploadify.min.js"></script & ...

  2. 分糖果(BFS)

    题目描述 童年的我们,将和朋友分享美好的事物作为自己的快乐.这天,C小朋友得到了糖果,将要把这些糖果分给要好的朋友们.已知糖果从一个人传给另一个人需要1秒的时间,同一个小朋友不会重复接受糖果.由于糖果 ...

  3. 201604-1 折点计数 Java

    思路: 这个题要小心考虑不全.左右两边都比这个数小 或者 左右两边都比这个数大 import java.util.Scanner; public class Main { public static ...

  4. Python笔记_第三篇_面向对象_2.第一个Python类

    1. 设计一个类: 设计一个类主要从三个方面进行考虑: 第一:类名:类名要见名知意.首字母大写. 第二:属性. 第三:方法. 备注:在Python中有些东西并不是绝对化的事情,有些根据Python社区 ...

  5. SLAM领域资源链接

    半闲居士高翔博客: https://www.cnblogs.com/gaoxiang12/ 视觉大佬冯兵博客: http://www.fengbing.net/ SLAMCN http://www.s ...

  6. android蜂巢效果、环形菜单、Kotlin影视应用、简约时钟、查看导出App、支付宝AR扫码效果等源码

    Android精选源码 一个蜂巢布局管理器,外观帅气外,动画效果也是很赞 一个基础 UI 框架项目,实现不同布局格式的混排 仿建行app效果,一个环形菜单的布局管理器源码 基于组件化实现的一款用Kot ...

  7. android新闻项目、饮食助手、下拉刷新、自定义View进度条、ReactNative阅读器等源码

    Android精选源码 Android仿照36Kr官方新闻项目课程源码 一个优雅美观的下拉刷新布局,众多样式可选 安卓版本的VegaScroll滚动布局 android物流详情的弹框 健身饮食记录助手 ...

  8. 阿里云 asp.net core nginx 单机部署

    1. dotnet core 安装 https://www.microsoft.com/net/download#core 安装之前要安装依赖:yum install libunwind libicu ...

  9. ruoyi StringUtils

    package com.ruoyi.common.utils; import java.util.Collection; import java.util.Map; import com.ruoyi. ...

  10. 14 微服务电商【黑马乐优商城】:day03-springcloud(Zuul网关)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...