javascript-在范围之间过滤数据

我想根据价格范围的下降过滤数据
示例第一个下拉列表应为：-
$15,以便过滤器数据应小于或等于$15,下拉菜单中应显示$15.如果秒是$15- $50,那么我如何在下拉菜单中显示数据$15- $50并进行相应过滤.我尝试的是here,但无法获得我想要的.这是我尝试并仍在尝试获得预期结果的方法,希望有人可以帮助我.

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

解决方法:

对于选项值,您可以根据选项的索引设置下限和上限.然后基于此进行过滤.

getValue方法就是要这样做的.这是您将作为valueChanges Observable的值接收的同一对象.然后,您可以根据上下限进行过滤.

尝试这个：

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

这是您的裁判Sample StackBlitz.