Пользовательская труба не работает

Я реализовал собственный канал, который получает массив объектов, а затем фильтрует этот массив в соответствии с пользовательским вводом. Но если я использую ссылку на элемент вместо [(ngModel)], это не работает.
Вот входной элемент и канал:

<input class="form-control ml-1" type="text" placeholder="Найти запчасть по названию" #search>

...

<tr *ngFor="let item of currentModel | searchPipe: search.value">

А вот и сама трубка.

@Pipe({
  name: 'searchPipe'
})
export class SearchPipe implements PipeTransform {

  transform(value: CatalogueShortDto[], args?: any): any {
    if (!isNullOrUndefined(args) && args.length > 0) {
      return value.filter(search => {
        return search.bluePrintCode.includes(args) || search.sparePartName.includes(args);
      });
    } else {
      return value;
    }
  }
}

Даже точки останова в трубе не срабатывали. Любые идеи?


angular angular-pipe
person andrey.shedko    schedule 11.07.2017    source источник
comment
Вы действительно задекларировали и экспортировали трубу?   -  person Chrillewoodz    schedule 11.07.2017
comment
@Chrillewoodz, конечно, иначе будет ошибка компиляции.   -  person andrey.shedko    schedule 11.07.2017
comment
‹input (input)=0 вызовет обнаружение изменений   -  person yurzui    schedule 11.07.2017
comment
@yurzui, нет, не работает   -  person andrey.shedko    schedule 11.07.2017
comment
@yurzui, ты почти прав. (keyup) сделал это. Вы можете добавить это как ответ.   -  person andrey.shedko    schedule 11.07.2017
comment
Он должен работать с (input), он также будет работать, если вы вставите фрагмент кода во ввод с помощью мыши plnkr .co/edit/bacEQxisRhcBZjTAqhgd?p=preview   -  person yurzui    schedule 11.07.2017
comment
Просто к вашему сведению... документация также настоятельно рекомендует против использовать канал для фильтрации, если только вы не уверены, что у вас очень маленький набор данных или вас не волнует производительность. См. эту ссылку: angular.io/guide/pipes#appendix-no- filterpipe-or-orderbypipe У меня есть пример кода для фильтрации в вашем компоненте. Дайте мне знать, если вы хотите, чтобы я разместил его здесь.   -  person DeborahK    schedule 11.07.2017
comment
@DeborahK, конечно, пожалуйста.   -  person andrey.shedko    schedule 12.07.2017

Ответы (2)


arrow_upward
0
arrow_downward

Согласно документам https://angular.io/guide/user-input#get-user-input-from-a-template-reference-variable

Angular обновляет привязки (и, следовательно, экран) только в том случае, если приложение делает что-то в ответ на асинхронные события, такие как нажатия клавиш. Этот пример кода привязывает событие keyup к числу 0, самому короткому оператору шаблона. Хотя оператор не делает ничего полезного, он удовлетворяет требованиям Angular, поэтому Angular обновляет экран.

Таким образом, вы можете использовать либо

<input (input)="0"

or

<input (keyup)="0"

Пример планкера

person yurzui    schedule 11.07.2017

arrow_upward
1
arrow_downward

Фильтрация в коде... Просто привяжите к filteredProducts.

import { Component, OnInit } from '@angular/core';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit {

    _listFilter: string;
    get listFilter(): string {
        return this._listFilter;
    }
    set listFilter(value: string) {
        this._listFilter = value;
        this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
    }

    errorMessage: string;
    filteredProducts: IProduct[];
    products: IProduct[] = [];

    constructor(private _productService: ProductService) {

    }

    performFilter(filterBy: string): IProduct[] {
        filterBy = filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
              product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
    }

    ngOnInit(): void {
        this._productService.getProducts()
                .subscribe(products => {
                    this.products = products;
                    this.filteredProducts = this.products;
                },
                    error => this.errorMessage = <any>error);
    }
}
person DeborahK    schedule 12.07.2017