zoukankan      html  css  js  c++  java
  • [Angular 2] Pipes with Multiple Parameters

    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)
                ));
        }
    }
  • 相关阅读:
    TCP与UDP
    DNS的概念,用途,DNS查询的实现算法
    子网划分的概念,子网掩码
    ping的原理以及ICMP
    组播和广播的概念,IGMP的用途
    ICMP协议
    RIP协议
    MTU的概念,什么是路径MTU? MTU发现机制,TraceRoute(了解)
    TFTP 与 FTP的区别
    vue slot slot-scope
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4928253.html
Copyright © 2011-2022 走看看