Угловая функция 2 добавить функцию debounce непосредственно к трубе

Question

Я написал канал, который отфильтровывает массив объектов на основе заданного запроса. Он отлично работает, но то, что я хотел бы сделать, это добавить функцию debounce прямо в этот канал, а не добавлять его к событию keyup ввода, если это возможно.

Я искал решение, но не могу найти ничего, что характерно для того, что я ищу.

import {Pipe, PipeTransform} from '@angular/core'; 

@Pipe({ 
    name: 'filterBy' 
}) 

export class FilterByPipe implements PipeTransform { 

    transform(value: any, args: string[]): any[] { 

    if (!args[0]) { 
     return value; 
    } 
    else if (value) { 

     return value.filter(item => { 

     // TODO: Allow args[1] to be null, therefore searching in all object properties 
     if ((typeof item[args[1]] === 'string' || item[args[1]] instanceof String) && (item[args[1]].toLowerCase().indexOf(args[0].toLowerCase()) !== -1)) { 
      return true; 
     } 
     }); 
    } 
    } 
} 

Любые идеи о том, как реализовать это в этой трубе?

Answer 1

Функции debounce или delay являются асинхронными, в этом случае вам нужно вернуть обещание или наблюдаемое из вашей трубы и использовать асинхронный канал. Я создал простой пример, чтобы показать вам, как это сделать с наблюдаемым.

@Pipe({ 
    name: 'myfilter' 
}) 

export class MyFilterPipe implements PipeTransform { 
    transform(items, filterBy) { 
     const filteredItems = items.filter(item => item.title.indexOf(filterBy.title) !== -1); 
     return Observable.of(filteredItems).delay(1000); 
    } 
} 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <ul> 
     <li *ngFor="let item of items | myfilter:filterBy | async"> 
     {{item.title}} 
     </li> 
     </ul> 

     <input type="text" (input)="filter($event)"> 

    </div> 
    `, 
}) 
export class App { 
    filterBy; 
    constructor() { 
    this.filterBy = {title: 'hello world'}; 
    this.items = [{title: 'hello world'}, {title: 'hello kitty'}, {title: 'foo bar'}]; 
    } 

    filter($event) { 
    this.filterBy = {title: $event.target.value} 
    } 
} 

Plunker