Angular4按过滤器分组不适用于管道：ngx-pipes

Posted 2023-02-22

【中文标题】Angular4按过滤器分组不适用于管道：ngx-pipes

【英文标题】：Angular4 group by filter not working with pipe: ngx-pipes

【发布时间】：2019-03-28 04:00:03

【问题描述】：

我真的想过滤我需要的数据，按价格和性别过滤产品。 我使用ngx-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,...]

]]

我的目的是在此处选择其中一个值后，过滤列表以包含具有相同标签 ID my target 的所有产品 现在的样子：Failure 真的需要帮助！ 非常感谢！

编辑： Console.log(Pricefilter)PriceFilter

【问题讨论】：

这对字符串不起作用，就像您尝试做的那样 k.DisplayText | groupBy: 'Value' 而是它需要像 priceFilter 这样的对象数组

@Suryan 谢谢！但没有任何改变

改用这种方式<option *ngFor="let k of PriceFilter | groupBy: 'Value' | keyvalue">k | json</option>

确保你有包含对象的 priceFilter 数组

@Suryan 谢谢。我编辑了我的问题，以便您可以查看日志。但没有任何改变

【参考方案1】：

这应该是你的sn-p

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>

【讨论】：

谢谢！如果我想添加 GenderFilter？另一个过滤器选择女性/男性，我可以使用相同的表格吗？谢谢！