Javascript 过滤范围之间的数据

我想根据价格范围的下拉列表过滤数据 第一个下拉列表示例应为：- $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>

{{i['DisplayText']}

这是我的组件

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

PriceFilter=[
{
“TagId”：20，
“类型”：“预算”，
“价值”：5，
“值”：空，
“显示文本”：“$50”，
“订单”：空
},
{
“TagId”：20，
“类型”：“预算”，
“价值”：15，
“值”：空，
“显示文本”：“$15”，
“订单”：空
}]
商店=[
{
“产品”：[
{
“产品ID”：206419，
“价格”：39.99，
“价格标签”：“$39.99”，
“产品标签”：[1,2]
},
{
“产品ID”：206419，
“价格”：3.99，
“价格标签”：“$9.99”，
“产品标签”：[1,2]
}
]}]//可以添加更多假数据进行测试
构造函数（私有fb:FormBuilder）{
this.myForm=this.fb.group({
过滤器产品：['']
})
}
恩戈尼尼特（）{
此.myForm.get（'filterProduct'）.valueChanges.subscribe(
值=>{
this.Stores.forEach（x=>{
console.log（x.Products.filter（val=>value.slice（1）>=
val[‘价格’]））
})
//this.Products.filter（val=>value.slice（1）我对您的代码进行了一些修改，以适应所需用例的逻辑。此外，我假设您的PriceFilter是可配置的，以便我们可以利用它

首先，您需要对
PriceFilter
进行修改，以包括
minValue
，以便比较存储结果

以下是一个工作示例：

变化如下：

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

//PriceFilter对象
价格过滤器=[
{
“TagId”：20，
“类型”：“预算”，
“最大值”：15，
“最小值”：0，
“值”：空，
“显示文本”：“$15”，
“订单”：空
}, {
“TagId”：20，
“类型”：“预算”，
“最大值”：50，
“minValue”：15，
“值”：空，
“显示文本”：“$15-$50”，
“订单”：空
}
]
//app.component.ts
恩戈尼尼特（）{
}
onChange（索引）{
const filter=this.PriceFilter[index]；
this.Stores.forEach（x=>{
console.log（x.Products.filter（val=>（filter.maxValue>=val['Price']和&filter.minValue
{{i['DisplayText']}

看一看，让我知道这是否有帮助。
对于选项值，您可以根据选项的
索引设置
下
和
上
。然后根据该设置进行筛选

getValue
方法就是要这样做的。这是同一个对象，对于
valueChanges
可见的
值，您将作为
value
接收。然后，您可以基于
下部
和
上部
进行过滤

试试这个：

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


{{getValue（i）.displayText}


{{product | json}}



在组件类中：

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

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormGroup，FormBuilder，FormControl}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
myForm:FormGroup；
filteredProducts=[]；
价格过滤器=[{
“TagId”：20，
“类型”：“预算”，
“价值”：15，
“值”：空，
“显示文本”：“$15”，
“订单”：空
},
{
“TagId”：20，
“类型”：“预算”，
“价值”：25，
“值”：空，
“显示文本”：“$25”，
“订单”：空
},
{
“TagId”：20，
“类型”：“预算”，
“价值”：50，
“值”：空，
“显示文本”：“$50”，
“订单”：空
}
]
商店=[{
“产品”：[{
“产品ID”：206419，
“价格”：39.99，
“价格标签”：“$39.99”，
“产品标签”：[1,2]
},
{
“产品ID”：206419，
“价格”：15.99，
“价格标签”：“$15.99”，
“产品标签”：[1,2]
},
{
“产品ID”：206419，
“价格”：10.99，
“价格标签”：“$10.99”，
“产品标签”：[1,2]
},
{
“产品ID”：206419，
“价格”：55.99，
“价格标签”：“$55.99”，
“产品标签”：[1,2]
},
{
“产品ID”：206419，
“价格”：1.99，
“价格标签”：“$1.99”，
“产品标签”：[1,2]
},
{
“产品ID”：206419，
“价格”：3.99，
“价格标签”：“$9.99”，
“产品标签”：[1,2]
}
]
}]
构造函数（私有fb:FormBuilder）{
this.myForm=this.fb.group({
过滤器产品：['']
})
}
getValue（索引）{
如果（索引==0）
返回{
下限：0，
displayText:this.PriceFilter[index].displayText，
上限：this.PriceFilter[index].Value
};
否则{
返回{
lower:this.PriceFilter[index-1]。值，
上限：this.PriceFilter[index]。值，
displayText:`${this.PriceFilter[index-1].displayText}-${this.PriceFilter[index].displayText}`
};
}
}
恩戈尼尼特（）{
this.filteredProducts=[…this.Stores[0].Products]；
此.myForm.get（'filterProduct'）.valueChanges.subscribe(
值=>{
console.log（值）；
this.filteredProducts=[…this.Stores[0].Products.filter（product=>product.Price>=value.lower&&product.Price）不太清楚您想在这里实现什么。是否需要两个选择列表来选择下限和上限，然后您想基于