按药丸/按钮过滤，而不是使用选择 - 角度答案

【问题标题】：Filter by pills/buttons instead of using a select - angular按药丸/按钮过滤，而不是使用选择 - 角度
【发布时间】：2020-01-26 11:45:32
【问题描述】：

我正在使用 Angular 进行构建，并使用过滤器管道从*ngFor 循环的下拉列表中过滤所选选项。然后相应地过滤内容。我想将选择选项交换为按钮或药丸。因此，当单击按钮时，过滤器就会发生 - 该按钮将充当开/关开关，因此您可以过滤多个选项。

这是我的 stackblitz 示例 - 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>

我不确定如何让按钮以与没有过滤相同的方式工作....任何帮助表示赞赏！？

【问题讨论】：

标签： javascript angular typescript filter pipe

【解决方案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>

Working Demo

【讨论】：

【解决方案2】：

关键在于将按钮/开关的值分配给您的filteredLocation 变量，如下所示

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

Updated Demo

希望这会有所帮助:)

【讨论】：

谢谢。任何想法如何更改过滤器/管道以一次使用多个过滤器？
您可以轻松应用多个过滤器/管道，只需使用| 管道它们，它们将按应用顺序应用。与第一个管道的输出一样，第二个管道将输入。

【解决方案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

【讨论】：

【解决方案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'"

【讨论】：