Question

您好我在angular4中创建了一个搜索管道，它从Json Data过滤公司团队规模，范围输入从0到100.范围过滤器不起作用，我是打字稿和angular4的新手，请帮我做一些基本代码但我没有得到逻辑。

范围管道 -

arrow.utcnow().to('Asia/Kolkata').timestamp

范围输入框 -

@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

Answer 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。

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

Answer 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>

角度4输入范围滤波器Json

2 个答案: