Question

好的，我现在遇到的问题是我正在尝试在搜索结果页面的管道上放置多个过滤器，其中数据是从api中提取的。我究竟如何将不同的参数合并到此过滤管道？

链接到应用：https://stackblitz.com/edit/flight-example?file=app%2Fapp.component.html

这是管道逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
 transform(items: any, max_price: any, depature_city: any): any {
    if (max_price === undefined) return 0;   

    // Filter each
    return  items.filter(t=> {
      // For Maximum Price
      if (t.price.amount <= max_price) {
        return t;
      }

      // For Depature City, also where I am having trouble
if (depature_city && items.depature.city.toLowerCase().indexOf(depature_city.toLowerCase()) === -1){
                    return false;
                }
                else{
            return items;
        }
    })
  }

}

这是HTML：

<div>
  <label> Maximum Price </label>
  <input type="text" [(ngModel)]="max_price">

  <label> Depature City </label>
  <input type="text" [(ngModel)]="depature_city">
<p>Result:</p>
 <ul>
    <li *ngFor="let group of displayItems  | filter: max_price:depature_city">
     City: {{group.departure.city}} <br>
     Price :   {{group.price.amount}}
    <ul>
        <li *ngFor="let flight of group.segments">
        Flight No:  {{flight.flightNumber}}
        </li>
    </ul>
    </li>
</ul>
</div>

这是我最后一次发布有关此应用的问题，我发誓。

Answer 1

您需要修改逻辑以从两个条件中过滤并返回

export class FilterPipe implements PipeTransform {
 transform(items: any, max_price: any, depature_city: any): any {
    if (max_price === undefined) return 0;   
    var filtereditems : any = [];
    // Filter each
    if (max_price){   
      filtereditems = items.filter(t=>t.price.amount <= max_price);
     }
    if(depature_city){
       console.log("departure city",depature_city);
       filtereditems =  items.some(t=>  t.departure.city.includes(depature_city));
    }
  if(depature_city && max_price){
       console.log("departure city",depature_city);
       filtereditems =  items.find(t=>  t.departure.city.includes(depature_city));

    }
    console.log("filtered",filtereditems);
     return filtereditems;
  }

}

需要检查上面的代码，它只是应用逻辑

角度滤波管上的多个参数

1 个答案: