Фильтровать данные между диапазонами

Question

Я хочу отфильтровать данные, основываясь на раскрывающемся диапазоне цен. Пример первого раскрывающегося списка должен составлять: - 15 долл. США, чтобы данные фильтра были ниже или равны 15 долл. США, а в раскрывающемся списке - 15 долл. США.Если секунда составляет 15-50 долларов, то как я показываю данные в выпадающем списке 15-50 долларов и фильтрую соответственно.Я попробовал здесь , но не смог получить то, что хочу.Вот то, что я пытался и все еще пытаюсь получить желаемый результат. Надеюсь, кто-нибудь может мне помочь.

.html файл

<form [formGroup]="myForm">
 <select name="Price" formControlName="filterProduct">
   <option *ngFor="let k of PriceFilter  | groupBy: 'Value' | keyvalue">
  <div>
   <ng-container *ngFor= "let i of k['value']">
    <span>{{i['DisplayText']}}</span>
   </ng-container>
  </div>
  </option>
 </select>
</form>

, а вот мой компонент

PriceFilter = [
{
  "TagId": 20,
  "Type": "Budget",
  "Value": 5,
  "Values": null,
  "DisplayText": "$50",
  "Order": null
},
{
  "TagId": 20,
  "Type": "Budget",
  "Value": 15,
  "Values": null,
  "DisplayText": "$15",
  "Order": null
}]

Stores = [
{
  "Products": [
    {
    "ProductId": 206419,
    "Price": 39.99,
    "PriceLabel": "$39.99",
    "ProductTags": [1,2]
    },
    {
    "ProductId": 206419,
    "Price": 3.99,
    "PriceLabel": "$9.99",
    "ProductTags": [1,2]
    }
 ]}] // can add more fake data to it for testing

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

ngOnInit() {
  this.myForm.get('filterProduct').valueChanges.subscribe(
    value => {
      this.Stores.forEach(x => {
        console.log(x.Products.filter(val => value.slice(1) >= 
  val['Price']))
      })
     //  this.Products.filter(val => value.slice(1) <= val['Price'])
    }
  )
}

Answer 1

Для значения опции вы можете установить lower и upper на основе index опции.А затем отфильтровать, основываясь на этом.

Метод getValue предназначен именно для этого.И это тот же объект, который вы получите как value для valueChanges Observable.Затем вы можете выполнить фильтрацию на основе lower и 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>

И в вашем классе компонентов:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  myForm: FormGroup;
  filteredProducts = [];
  PriceFilter = [{
      "TagId": 20,
      "Type": "Budget",
      "Value": 15,
      "Values": null,
      "DisplayText": "$15",
      "Order": null
    },
    {
      "TagId": 20,
      "Type": "Budget",
      "Value": 25,
      "Values": null,
      "DisplayText": "$25",
      "Order": null
    },
    {
      "TagId": 20,
      "Type": "Budget",
      "Value": 50,
      "Values": null,
      "DisplayText": "$50",
      "Order": null
    }
  ]

  Stores = [{
    "Products": [{
        "ProductId": 206419,
        "Price": 39.99,
        "PriceLabel": "$39.99",
        "ProductTags": [1, 2]
      },
      {
        "ProductId": 206419,
        "Price": 15.99,
        "PriceLabel": "$15.99",
        "ProductTags": [1, 2]
      },
      {
        "ProductId": 206419,
        "Price": 10.99,
        "PriceLabel": "$10.99",
        "ProductTags": [1, 2]
      },
      {
        "ProductId": 206419,
        "Price": 55.99,
        "PriceLabel": "$55.99",
        "ProductTags": [1, 2]
      },
      {
        "ProductId": 206419,
        "Price": 1.99,
        "PriceLabel": "$1.99",
        "ProductTags": [1, 2]
      },
      {
        "ProductId": 206419,
        "Price": 3.99,
        "PriceLabel": "$9.99",
        "ProductTags": [1, 2]
      }
    ]
  }]

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

Вот Образец StackBlitz для вашей ссылки.

Answer 2

Я немного изменил ваш код, чтобы приспособить логику для нужного вам варианта использования.Также я предполагаю, что ваш PriceFilter настраивается так, чтобы мы могли им воспользоваться.

Прежде всего вам нужно изменить PriceFilter, чтобы включить minValue, что вам нужно будет сравнить результаты магазина.

Вот рабочий пример: https://stackblitz.com/edit/angular-ymdwpp?file=src%2Fapp%2Fapp.component.ts

Изменения заключаются в следующем:

//PriceFilter object
  PriceFilter = [
    {
      "TagId": 20,
      "Type": "Budget",
      "maxValue": 15,
      "minValue": 0,
      "Values": null,
      "DisplayText": "$15",
      "Order": null
    }, {
      "TagId": 20,
      "Type": "Budget",
      "maxValue": 50,
      "minValue": 15,
      "Values": null,
      "DisplayText": "$15-$50",
      "Order": null
    }
  ]

//app.component.ts
  ngOnInit() {

  }

  onChange(index) {
    const filter = this.PriceFilter[index];
    this.Stores.forEach(x => {
      console.log(x.Products.filter(val => (filter.maxValue >= val['Price'] && filter.minValue < val['Price'])))
    })
  }

//app.component.html
<hello name="{{ name }}"></hello>
<p>
    open the console to see the result
</p>

<form [formGroup]="myForm">
    <select name="Price" formControlName="filterProduct" (change)="onChange($event.target.value)">
    <option *ngFor="let k of PriceFilter  | groupBy: 'maxValue' | keyvalue; let ind = index" [value]="ind">
      <div>
   <ng-container *ngFor= "let i of k['value']">
      <span>{{i['DisplayText']}}</span>
   </ng-container>
   </div>
    </option>
    </select>
</form>
<!-- Modify according to your need -->

Посмотрите и дайте мне знать, если это поможет.