數據同時過濾在角2

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

而是在組件中添加代碼以執行過濾。

下面是一個例子：當我在角2使用過濾器的過濾器內部只是因爲我的JSON格式的

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