自定义管道不起作用

Question

我确实实现了获取对象数组的自定义管道，然后根据用户输入过滤该数组。但是如果我使用元素引用而不是 [(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;
    }
  }
}

甚至管道中的断点也没有触发。有什么想法吗？

Answer 1

根据文档 https://angular.io/guide/user-input#get-user-input-from-a-template-reference-variable

Angular updates the bindings (and therefore the screen) only if the app does something in response to asynchronous events, such as keystrokes. This example code binds the keyup event to the number 0, the shortest template statement possible. While the statement does nothing useful, it satisfies Angular's requirement so that Angular will update the screen.

所以你可以使用任何一个

<input (input)="0"

或

<input (keyup)="0"

Plunker Example

Answer 2

正在代码中过滤...只需绑定到 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);
    }
}

自定义管道不起作用

Custom pipe is not working

angular

angular-pipe