[Angular 2] Pipes with Multiple Parameters
Angular with multiple parameters
2023-09-14 09:00:54 时间
Showing how to set up a Pipe that takes multiple updating inputs for multiple Component sources.
import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2'; import {TodoService} from './todoService'; import {TodoItemRender} from './todoItemRender'; import {StartsWith} from './startsWith'; import {SimpleSearch} from './simpleSearch'; import {LetterSelect} from './letterSelect'; import {TodoSearch} from './todoSearch'; @Component({ selector: 'todo-list' }) @View({ pipes: [StartsWith, SimpleSearch], directives: [NgFor, TodoItemRender, FORM_DIRECTIVES, LetterSelect, TodoSearch], template: ` <div> <todo-search #todo-search></todo-search> {{todoSearch.term}} <todo-item-render *ng-for="#todo of todoService.todos | simpleSearch: ['title','action'] : todoSearch.term" [todoinput]="todo" > </todo-item-render> </div> ` }) export class TodoList{ constructor( public todoService:TodoService ){ } }
import {Pipe} from 'angular2/angular2'; @Pipe({ name: 'simpleSearch', pure: false }) export class SimpleSearch{ transform(value, [fields, letter]:[string[], string]){ return value.filter((item)=> fields.some((field)=> item[field].includes(letter) )); } }
相关文章
- AngularJS进阶(五)Angular实现下拉菜单多选
- 前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- Angular HTTPClient API 在 SAP 电商云中的使用
- Angular面试题_session面试题
- 关于 Angular Universal 应用执行时需要 Browser API 的问题
- 使用 Angular Universal 进行服务器端渲染避免 window is not defined 的错误消息
- Angular 项目路径添加指定的访问前缀
- Angular 项目多国语言设置
- Angular 服务器端渲染场景里,服务器端和客户端渲染出的 HTML 源代码有可能不完全一致
- 关于 Angular 12 的 inlineCriticalCss 选项
- Web 前端框架:Angular 4.0.0 正式版发布
- 语句掌握Oracle中用WITH语句的利用技巧(oracle的with)
- Angular 2对 React:究竟孰优孰劣?
- 语句Oracle中简洁的With语句(oracle 中with)