[Angular 2] Using Pipes to Filter Data
Angular to Data Using filter
2023-09-14 08:59:20 时间
Pipes allow you to change data inside of templates without having to worry about changing it in the Controller. Creating a custom Pipe is as simple as giving it a name and a transform function that output what you expect.
Create a Pipe:
import {Pipe} from 'angular2/core'; @Pipe({ name: 'search' }) export class SearchPipe{ transform(todos){ return todos.filter( (todoModel) => { // Only showing the todo starts with 'e' return todoModel.title.startsWith('e'); } ) } }
Using a pipe:
import {Component} from 'angular2/core'; import {TodoService} from './TodoService'; import {TodoItemRenderer} from './TodoItemRenderer'; import {SearchPipe} from './search-pipe'; @Component({ selector: 'todo-list', pipes: [SearchPipe], directives: [TodoItemRenderer], template: ` <ul> <li *ngFor="#todo of todoService.todos | search"> <todo-item-renderer [todo]="todo"></todo-item-renderer> </li> </ul> ` })
-------------------
相关文章
- 一个 Angular 开发人员对腾讯 Cloud Studio 使用后的体验报告
- angular子组件传值到父组件_vue子组件传值给父组件
- 关于 Angular HttpClient 的单例特性的思考
- Angular 14 inject 函数使用过程中的一些注意事项
- 关于 Angular 应用的入口
- 使用 Angular Universal 进行服务器端渲染避免 window is not defined 的错误消息
- angular框架发展史
- Angular RouterModule.forRoot(ROUTES) 和 forChild(ROUTES)的区别
- 【Angular教程】组件动效u002F动态组件u002F视图封装模式
- Angular forRoot 方法的使用场合介绍
- Angular SSR 应用启动时的一些保护措施
- Angular 应用 tsconfig.json 文件里的 typeRoots 属性讲解
- 关于 Angular 应用的 Bootstrap 过程
- Angular 项目中 angular.json builder 字段的可选项介绍
- 关于 Angular 应用部署时的 base-href 参数
- ORA-16444: ALTER SYSTEM FLUSH REDO TO STANDBY failed due to a corrupted control file or online log file. ORACLE 报错 故障修复 远程处理
- Angular 4.0发布,致力于减小代码体积详解编程语言
- Angular 2对 React:究竟孰优孰劣?
- 利用Oracle TO函数实现数据转换(oracle to_函数)