Angular 4输入范围过滤器Json答案

【问题标题】：Angular 4 input range filter JsonAngular 4输入范围过滤器Json
【发布时间】：2017-09-17 22:23:07
【问题描述】：

您好，我正在 angular4 中创建一个搜索管道，它从 Json 数据中过滤公司团队规模，范围输入从 0 到 100。范围过滤器不起作用，我是 typescript 和 angular4 的新手，请帮助我做了一些基本代码但我不明白逻辑。

范围管道 -

@Pipe({
  name: 'range'
})
export class CheckboxPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    console.log('args', args);
    return args
            ? value.filter(sal => { return sal.team })
            : value;
  }

}

范围输入框 -

0 <input type="range" min="0" max="100" 
        [(ngModel)]="team" name="team" /> 100

要过滤的列表 -

<div *ngFor="let joblist of jobList | range: team">
    {{joblist.team}}
</div>

【问题讨论】：

标签： angular typescript

【解决方案1】：

把你的transform()改成这个，

transform(value: any, team?: any): any {
return (team || team === 0)
        ? value.filter(sal => { return sal.team })
        : value;
}

看看它是否解决了问题。

更新：

对此并不完全确定，但我猜ngModel 可能没有得到正确的值，因为input type 属于range。你可以试试这个吗？

0 <input #rangeInput type="range" min="0" max="100" [(ngModel)]="team" name="team" /> 100
<div *ngFor="let joblist of jobList | range: rangeInput?.value">
 {{joblist.team}}
</div>

所以我添加了一个模板引用变量#rangeInput 并使用它来将control 的值传递给pipe。

如果这也不起作用，请尝试将transform() 的return 中的team === 0 签入更改为此team === '0'。（将value 视为string 而不是number）。

【讨论】：

不，先生，还是一样。我从这个 (jilles.me/ng-filter-in-angular2-pipes) 得到了教程，但它基于 angular 2，对此做了一些更改。
我不确定 v4 和 v2 中的管道是否有显着差异，如果不一样的话。为了适应 v4，您必须进行哪些更改？
您好先生，它给出了以下错误 - 无法读取未定义的属性“值”。有什么建议吗？
你在哪一行得到这个？
这个 -

【解决方案2】：

您好，我解决了范围过滤器问题，实际上并不难。在这里——

滑块范围管道 -

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

@Pipe({
  name: 'range'
})
export class RangePipe implements PipeTransform {

  transform(teamVal: any, teamFil?: any): any {
        console.log('teamFil', teamFil);
        return teamFil
         ? teamVal.filter(person => person.team >= teamFil) 
         : teamVal;
    }

}

范围滑块 -

<span>0</span>
<input type="range" min="0" max="100" [(ngModel)]="sliderValue" />
<span>100</span>

组件中的滑块值 -

sliderValue: number = 0;

使用范围滑块过滤的数据 -

<ul>
    <li *ngFor="let joblists of jobList | range: sliderValue">{{joblists.team}}</li>
</ul>

【讨论】：