在角度7中使用lodash过滤等级

时间:2019-02-14 21:04:04

标签: angular typescript lodash

我有一个角度应用程序,显示以下示例数据:

samples = [
    { 'user': 'trump',  'rank': 36, 'active': true },
    { 'user': 'fred',    'rank': 30, 'active': false },
    { 'user': 'luke',  'rank': 47, 'active': true },
    { 'user': 'hillary',    'rank': 44, 'active': false },
    { 'user': 'bernie',  'rank': 36, 'active': true },
    { 'user': 'john',    'rank': 40, 'active': false },
    { 'user': 'pebbles', 'rank': 1,  'active': true }
];

我想做的是使用lodash来过滤客户端中的排名。我的过滤器允许我过滤大于或小于的排名。以下是过滤器:

component.ts中:

.... other necessary codes....
ngOnInit() {
    this.sampleService.loadAllSamples().subscribe(filteredSamples => {
      this.filteredSamples = filteredSamples;
      this.applyFilters();
   });
}

private applyFilters() {
    this.filteredSamples = _.filter(this.samples, _.conforms(this.filters));
}

filterGreaterThan(property: string, rule: number) {
    this.filters[property] = val => val > rule;
    this.applyFilters();
  }

  filterLessThan(property: string, rule: number) {
    this.filters[property] = val => val < rule;
    this.applyFilters();
  }

在我的html模板中,我具有等级过滤器,该过滤器使我可以获得高于输入值的等级。

<input type="number" id="rank" name="rank" [(ngModel)]="rank" (change)="filterGreaterThan('rank', rank)">

到目前为止,一切都按预期进行。我显示了经过过滤的数据(在这种情况下,大于)。

我想做的是像上面一样添加另一个过滤。这应该允许我像等级范围一样同时过滤“小于”。我的问题是,由于两个过滤器均以排名值作为目标,因此我无法同时从大于和小于中筛选出排名。任何帮助将不胜感激!

0 个答案:

没有答案