Question

我的JSON数据：

 [
    {
    "Key":"Brochure",
    "Value":[{
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Aberdeen"],
            "Industry":["Accounting"],
            "Reprint":"Request",
            "Contact":"Mike Astrup",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        },
        {
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Accounting"],
            "Industry":["Accounting"],
            "Reprint":"Request",
            "Contact":"Mike Astrup 1",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        }]
    },
    {
    "Key":"Handout",
    "Value":[{
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Accounting"],
            "Industry":[""],
            "Reprint":"Request",
            "Contact":"Mike Astrup 2",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        },
        {
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Accounting"],
            "Industry":["Accounting"],
            "Reprint":"Request",
            "Contact":"Mike Astrup 3",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        },{
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Accounting"],
            "Industry":["","Health Care"],
            "Reprint":"Request",
            "Contact":"Mike Astrup 4",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        },{
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Accounting"],
            "Industry":["Accounting"],
            "Reprint":"Request",
            "Contact":"Mike Astrup 5",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        }]
    }
]

我在管道过滤器中编写代码： ------自定义管道代码是-----

transform(allData: any[], industry: any[], service:any[], location:any[],contact:any,owner:any,status:any, counter:any ): any {

var filteredArray = allData;

filteredArray = filteredArray.filter(item => {item.Value = item.Value.filter(innerItem => location.some(industryFilter =>innerItem.Industry.some(filterArr => {if(filterArr == industryFilter) return innerItem;})))});

... return filteredArray;

-----结束---

和我的html文件

<div class="tblArea" *ngFor="let item of allData|filterPipe:industryCheckBox:serviceCheckBox:locationCheckBox:contact:owner:status:counter">

...

当在filteredArray中从此管道返回数据时，它还会更新转换中的allData，而我没有更新它。

下次当我过滤任何数据时，它不会从整个数据中过滤，只是从过滤后的数据中过滤。

有人可以告诉我为什么会这样，我该如何解决这个问题。

Answer 1

您好像在这里将Value属性设置为已过滤的列表：

item.Value = item.Value.filter(...)

这将改变原始值。

使用管道进行过滤实际上并不是一个好主意。请参阅此处的链接：https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

而是在组件中添加代码以执行过滤。

以下是一个例子：

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;
    }

    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);
    }
}

在Angular 2中过滤时，管道中的数据会更新

1 个答案: