Фильтр по таблеткам / кнопкам вместо выбора - угловой

Question

Я строю с Angular и использую трубу фильтра для фильтрации по выбранной опции из моего выпадающего списка в цикле *ngFor.Затем содержимое фильтруется соответствующим образом.Я хочу поменять варианты выбора на кнопки или таблетки.Таким образом, при нажатии кнопки происходит фильтрация - кнопка будет действовать как переключатель включения / выключения, поэтому вы можете отфильтровать более одного параметра.

Вот мой пример стекаблица - https://stackblitz.com/edit/timeline-angular-7-tyle1f

    <div class="form-group row">
      <div class="col-sm">
        <select class="form-control" name="locationFilter" id="locationFilter" [(ngModel)]="filteredLocation">
          <option value="All">All</option>
          <option *ngFor="let entry of timeLine | filterUnique" value="{{entry.location}}">{{entry.location}}
          </option>
        </select>
      </div>
//Button filters below
       <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
            <button class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>
       </div>
    </div>

Я не уверен, как заставить кнопки работать так же, как не происходит фильтрация ... любая помощьцениться!

Answer 1

Привязать событие нажатия (click)="filteredLocation = entry.location" к кнопке

Попробуйте так:

 <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
     <button  (click)="filteredLocation = entry.location" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>
  </div>

Рабочая демонстрация

Answer 2

Суть этого заключается в том, чтобы просто присвоить значение кнопки / переключателя вашей filteredLocation переменной, как показано ниже

<button (click)="filteredLocation = entry.location" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>

Обновленная демонстрация

Надеюсь, что этопомогает:)

Answer 3

Проще всего иметь обработчик кликов:

<div>
  <button class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique" (click)="filter(entry)">{{entry.location}}</button>
</div>

filter(entry) {
  this.filteredLocation = entry.location;
}

Демо: https://stackblitz.com/edit/timeline-angular-7-z2e6zh?file=src/app/timeline/timeline.component.ts

Answer 4

Если вы хотите фильтровать по нескольким параметрам, ваш канал фильтра должен быть настроен так, чтобы он соответствовал массиву строк для фильтрации.

Таким образом, в вашем FilterPipe функция преобразования изменяется следующим образом:

transform(value: string[], filterStrings: string[], propName: string): any {
    if (value.length === 0 || !filterStrings || filterStrings.length === 0) {
      return undefined;
    }

    const resultArray = [];
    for (const item of value) {
      if (filterStrings.indexOf(item[propName]) >= 0) {
        resultArray.push(item)
      }
    }

    return resultArray;
}

После этого вам нужно добавить код в файл timeline.component.ts:

Массив для хранения всех активных параметров фильтра:

filteredLocations: string[] = [];

ФункцияЧтобы включить или отключить параметр:

toggle(location) {
    let indexLocation = this.filteredLocations.indexOf(location);
    if (indexLocation >= 0) {
      this.filteredLocations = this.filteredLocations.filter((i) => i !== location);
    } else {
      this.filteredLocations.push(location);
    }
}

Теперь измените шаблон (timeline.component.html):

Снимите поле выбора.

Добавьте обработчик щелчков в свойкнопка:

<button (click)="toggle(entry.location)" class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>

И, наконец, фильтр должен принимать новые отфильтрованные местоположения: (Я только что изменил фильтрованное местоположение на фильтрованное местоположение)

*ngFor="let entry of timeLine | filter:filteredLocations:'location'"