Труба для одновременного разрешения нескольких значений фильтра - угловая - PullRequest
Новая
       18

Труба для одновременного разрешения нескольких значений фильтра - угловая

0 голосов
/ 26 сентября 2019

Кнопки создаются с использованием *ngFor, возвращая столько различных типов значений, доступных для фильтрации.Я выполняю фильтрацию по ключу «location», поэтому, если есть местоположения «west» и «england», тогда доступны две кнопки «west» и «england» для фильтрации.

Что яхотите иметь возможность выбрать несколько фильтров.Если я нажимаю «Англия», возвращаются все результаты для «Англии», затем, если я нажимаю «Запад», возвращается «Запад», а «Англия» остается «активной».В настоящее время я могу щелкнуть только по одному фильтру за раз.

Я думаю, что мне нужно назначить активный класс для моей кнопки, тогда это подтолкнет массив того, что активно, отправить в мой канал, чтобы выполнить фильтрацию ...?

Кнопка «Мой фильтр» 

  <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
    <button value="All" class="m-2 btn btn-primary" type="button">All</button>
    <button [class.active]="selectedIndex === i" (click)="filteredLocation = entry.location" class="m-2 btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique; let i = index">{{entry.location}}</button>
  </div>

один фильтр по результатам 

<div class="timeline">
  <my-timeline-entry *ngFor="let entry of timeLine | filter:filteredLocation:'location'" timeEntryHeader={{entry.year}} timeEntryContent={{entry.detail}} timeEntryPlace={{entry.place}} timeEntryLocation={{entry.location}}></my-timeline-entry>
</div>

Я создал стекУ меня есть - попробуйте нажать на фильтр, вы увидите, что только один фильтр может быть применен одновременно.https://stackblitz.com/edit/timeline-angular-7-nve3zw

Любая помощь здесь будет отличной.Спасибо

1 Ответ

1 голос
/ 26 сентября 2019

Может быть несколько способов сделать это, например, присоединить какое-либо свойство, чтобы определить, активно ли местоположение, например, isLocationActive

Затем переключите этот флаг в соответствии с вашими потребностями и также примените активный класс.в этом случае не требуется фильтр-труба

Так что ваш HTML будет выглядеть как 

<div class="form-group row">
  <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
        <button value="All" class="m-2 btn btn-primary" (click)="activeAllEntries()" type="button">All</button>
        <button [class.active]="entry.isLocationActive" (click)="entry.isLocationActive = !entry.isLocationActive" class="m-2 btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique; let i = index">{{entry.location}}</button>
      </div>
</div>

<div class="timeline">
  <ng-container *ngFor="let entry of timeLine">
<my-timeline-entry *ngIf="entry.isLocationActive" timeEntryHeader={{entry.year}} timeEntryContent={{entry.detail}} timeEntryPlace={{entry.place}} timeEntryLocation={{entry.location}}></my-timeline-entry>
  </ng-container>

</div>

Функция TS 

   activeAllEntries() {
      this.timeLine.forEach(t=> t.isLocationActive=!t.isLocationActive)
   }

рабочая демоверсия

...