Question

我确实实现了获取对象数组的自定义管道，然后根据用户输入过滤此数组。但是如果我使用元素引用而不是[（ngModel）]，它就不起作用了。
这是输入元素和管道：

multiprocessing

...

Lock

这是管道本身。

Queue

甚至管道中的断点也没有被解雇。有什么想法吗？

Answer 1

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

Answer 2

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

Angular仅在更新时才更新绑定（以及屏幕）应用程序执行某些操作以响应异步事件，例如按键。此示例代码将keyup事件绑定到数字0，可能的最短模板语句。虽然声明确实如此没有用，它满足Angular的要求，以便Angular 将更新屏幕。

所以你可以使用

<input (input)="0"

或

<input (keyup)="0"

<强> Plunker Example

自定义管道不起作用

2 个答案: