Фильтрация рядов с использованием lodash в угловых 7 - PullRequest
Новая
       6

Фильтрация рядов с использованием lodash в угловых 7

0 голосов
/ 15 февраля 2019

У меня есть угловое приложение, которое отображает пример данных, как показано ниже: 

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)">

Пока все работает как положено.У меня есть данные с фильтром (в данном случае, больше, чем) отображаются.

Я хотел добавить еще одну фильтрацию, как описано выше.Это должно позволить мне фильтровать «меньше чем» одновременно как диапазон рангов.Моя проблема в том, что, поскольку оба фильтра нацелены на значение ранга, я не могу отфильтровать ранги от большего и меньшего, чем одновременно.Любая помощь будет оценена!

...