Question

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

Answer 1

我对您的代码做了一些修改，以适应您想要的用例的逻辑。我还假设您的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 -->

看一下，让我知道是否有帮助。

Answer 2

对于选项值，可以基于选项的lower设置upper和index。然后基于此进行过滤。

getValue方法就是要做到这一点。这是同一对象，对于value可观察对象，您将作为valueChanges收到。然后，您可以根据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)]
      }
    )
  }
}

这是您推荐的Sample StackBlitz。

在范围之间过滤数据

2 个答案: