Angular4按过滤器分组不适用于管道：ngx-pipes

Question

我真的想过滤我需要的数据，按价格和性别过滤产品。 我使用ngx-pipe，构建管道对数据进行排序。 HTML：

    <select [(ngModel)]="ProductCategory" (change)="updateProductCategory($ProductCategory)" name=Gender>
    <option *ngFor="let g of GenderFilter">{{g.DisplayText}}</option>
  </select>
  <select [(ngModel)]="ProductCategory" (change)="updateProductCategory($ProductCategory)" name=Price>
        <option *ngFor= "let k of PriceFilter ">{{k.DisplayText | groupBy: 'Value'}}</option>
    </select>


  <ul>
  <li *ngFor="let store of stores">
    <ul>
      <li *ngFor="let product of store.Products">
          <img src={{product.ProductImage}}>
          <p>store: {{ store.StoreName }}</p>
          <p>Product Price: {{ product.Price | currency}}</p>
        <p>Product Title: {{ product.ProductTitle }}</p>
      </li>
    </ul>
  </li>
</ul> 

ts：

  ProductCategory;

  updateProductCategory(stringCategory: any) {
  this.ProductCategory = stringCategory;
  }
   //getting the data from JSON
  ngOnInit() {
    this._storeService.getProducts()
   .subscribe(data =>{
    this.products = data.Stores.Products;
    this.filtered = data.PriceFilter.TagId;

    this.stores=data.Stores;});

JSON 像：

   "PriceFilter": [
    {
      "TagId": 20,
      "Type": "Budget",
      "Value": 5,
      "Values": null,
      "DisplayText": "$5",
      "Order": null
    }]
"GenderFilter": [
    {
      "TagId": 3,
      "Type": "Gender",
      "Value": 3,
      "Values": null,
      "DisplayText": "Boy",
      "Order": 1
    }

产品：

"Stores": [
    {
      "Products": [
        {
 "ProductId": 206419,
 "Price": 39.99,
          "PriceLabel": "$39.99",
          "ProductTags": [1,2,...]
}
]}]

我的目的是在此处选择其中一个值后，过滤列表以包含具有相同标签 ID my target 的所有产品 现在的样子：
Failure
真的需要帮助！
非常感谢！

编辑： Console.log(Pricefilter)PriceFilter

Answer 1

这应该是你的sn-p

constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      filterProduct: ['']
    })
  }

  getValue(index) {
    if(index === 0)
      return { 
        lower: 0, 
        displayText: this.PriceFilter[index].DisplayText, 
        upper: this.PriceFilter[index].Value 
      };
    else {
      return { 
        lower: this.PriceFilter[index - 1].Value, 
        upper: this.PriceFilter[index].Value,
        displayText: `${this.PriceFilter[index - 1].DisplayText} - ${this.PriceFilter[index].DisplayText}`
      };
    }
  }

  ngOnInit() {
    this.filteredProducts = [...this.Stores[0].Products];

    this.myForm.get('filterProduct').valueChanges.subscribe(
      value => {
        console.log(value);
        this.filteredProducts = [...this.Stores[0].Products.filter(product => product.Price >= value.lower && product.Price <= value.upper )]
      }
    )
  }
}

<form [formGroup]="myForm">
	<select name="Price" formControlName="filterProduct">
    <option *ngFor="let k of PriceFilter; let i = index;"
      [ngValue]="getValue(i)">
      {{ getValue(i).displayText }}
    </option>
  </select>
</form>

<div>
  <ul>
    <li *ngFor= "let product of filteredProducts">
      {{ product | json }}
    </li>
  </ul>
</div>