javascript - 通过管道同时允许多个过滤器值 - Angular

Question

按钮是使用*ngFor生成的，带回可用于过滤的尽可能多的不同类型的值。我正在按“位置”键进行过滤，因此如果存在“西部”和“英格兰”位置，则可以使用“西部”和“英格兰”两个按钮进行过滤。

我想要做的是选择多个过滤器。如果我单击“英格兰”，“英格兰”的所有结果都会返回，然后如果我单击“西部”，则“西部”会返回，并且“英格兰”仍然处于“事件”状态。目前，我一次只能单击一个过滤器。

我认为我需要为我的按钮分配一个事件类，然后这将推送一组事件内容以发送到我的管道以进行过滤...？

我的过滤器按钮

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

我已经创建了一个我所拥有的 stackBlitz - 尝试单击一个过滤器，您将看到一次只能应用一个过滤器。 https://stackblitz.com/edit/timeline-angular-7-nve3zw

这里的任何帮助都会很棒。谢谢

Answer 1

有多种方法可以实现，其中一种方法是附加一些属性来确定位置是否处于事件状态，例如 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)
   }

working Demo