Группа Angular4 по фильтру не работает с трубой: ngx-pipe - PullRequest
Новая
       11

Группа Angular4 по фильтру не работает с трубой: ngx-pipe

0 голосов
/ 23 октября 2018

Я действительно пытаюсь отфильтровать нужные мне данные, отфильтровать товары по цене и полу.Я использовал ngx-pipe , build 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,...]
}
]}]

Моя цель После выбораодно из значений здесь, чтобы отфильтровать список и включить все продукты с одинаковым идентификатором тега моя цель как это выглядит сейчас:
Ошибка
Действительно нужна помощь!
Большое спасибо!

Отредактировано: Console.log (Pricefilter) PriceFilter

1 Ответ

0 голосов
/ 29 октября 2018

Это должен быть ваш фрагмент 

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>
...