Angular 最大 - 最小数量的自定义管道

Question

所以我正在尝试创建一个用于输入价格的输入，并且该输入正在使用管道进行过滤。正在从具有 JSON 信息的 API 接收到不同的价格。

因此，例如，如果我输入价格“300 美元”，则每个航班的结果都是 300 美元及以下。

我真的很不擅长写管道 :( 到目前为止，我连接到它的管道在一定程度上过滤了输入，但我不知道如何让它成为条件。

https://stackblitz.com/edit/http-get-json?file=app%2FfilterPipe.ts

   <hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
</p>
<button (click)="onClick()">Send Request</button>

<div>
  <input type="text" [(ngModel)]="term">
<p>Result:</p>
 <ul>
    <li *ngFor="let group of displayItems">
    {{group.departure.city}}
    <ul>
        <li *ngFor="let flight of group.fares  | filter: term">
        {{flight.price.amount}}
        </li>
    </ul>
    </li>
</ul>
</div>

这是管道逻辑 -->

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

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

        return items.filter(function(item) {
          for(let property in item){

            if (item[property] === null){
              continue;
            }
            if(item[property].toString().toLowerCase().includes(term.toLowerCase())){
              return true;
            }

           }
          return false;
        });
      }

    }

Answer 1

我已经修改了你的过滤管如下

export class FilterPipe implements PipeTransform {
 transform(items: any, term: any): any {
    if (term === undefined) return items;   
    return  items.filter(t=>t.price.amount <= term);;
  }

}

和WORKING DEMO

Angular 最大 - 最小数量的自定义管道

Angular Custom Pipe with Max - Min amount

html

angular

input

pipes-filters