Question

感谢您提前回复，这个问题几天来一直无法解决。

我构建了一个非常简单的Angular（5.2.8）应用程序，它显示来自JSON文件的数据。我使用* ngFor列出项目并创建了一个管道，允许用户使用文本输入过滤数据。

我现在想让用户使用一系列复选框来过滤数据。到目前为止，我已经尝试过，IF语句和SWITCH语句，但我猜测angular有一种更有效的方式来允许它工作。

我已经查看了（点击）和ngModel但到目前为止没有运气创建一个允许此功能的管道。

如果有人能帮助我，我将非常感激：）

管

@Pipe({
  name: 'checkboxfilter'
})
export class CheckBoxFilter implements PipeTransform {

  transform(check: any, checked: any): any {
    console.log('checked',checked);
    return checked
            ? check.filter(club =>  club.location == checked) 
            : check;
  }

}

HTML - 复选框的示例

<div class="col-md-12">
    <div class="button">
        <label>
            <input class="checkbox" type="checkbox" value="Championship" [(ngModel)]="checked" name="club">
            <span>
                <i class="fa fa-filter" aria-hidden="true"></i>
                Championship
            </span>
        </label>
    </div>

HTML - 输入文字过滤器和* ngFor

<input class="search" type="text" [(ngModel)]="term" placeholder="Search for a team name, location or league">
<div class="row">
  <div (click)="club.hide = !club.hide" class="card custom-card col-md-4 col-sm-6" *ngFor="let club of clubs | filter:term | checkboxfilter:checked">

切换声明 - 使用html中的（点击）事件的先前尝试的解决方案

includeLeague(filter: string) {
      switch(filter) {
        case 'all':
        return this.clubs = this.clubs.filter(club => {
          return this.clubs;
        });         
        case 'championship':
        this.clubs = this.clubs.filter(club => {
          return club.league.toLowerCase().includes('championship');
        })
      }
    }

Answer 1

As pointed out in the angular docs，您可能不希望使用管道完成此任务（过滤）。这是因为在每个变化检测周期都应用管道，并且过滤可能是昂贵的操作。相反，直接操纵存储的数据。例如，这里有一些伪代码

@Component({
  template: `
    <div *ngFor="let datum of data"></div>

    <input type="checkbox"
           [value]="true"
           (change)="$event.value ? addFilter(hideRedData) : removeFilter(hideRedData)"
           >

    <input type="checkbox"
           [value]="true"
           (change)="$event.value ? addFilter(hideBlueData) : removeFilter(hideBlueData)"
           >
  `
})
class FakeComponent {
  private originalData: any[] = [];

  public data: any[] = [];

  private filters: ((data: any[]) => any[])[] = [];

  hideRedData() {
    this.data = this.data.filter(datum => !datum.red);
  }

  hideBlueData() {
    this.data = this.data.filter(datum => !datum.blue);
  }

  addFilter(filterFnc: () => any[]) {
    this.filters.push(filterFnc)
    this.filterData();
  }

  removeFilter(filterFnc: () => any[]) {
    this.filters = this.filters.filter(filter => filter !== filterFnc);
    this.filterData();
  }

  private filterData() {
    this.data = this.originalData.slice();

    this.filters.forEach(filter => filter());
  }
}

我实际上并不确定输入更改事件的界面是什么（因此我不确定$event.value是否正确等等），但希望您明白这一点：当复选框更改事件触发时，查看是否选中了复选框并添加或删除相应的过滤功能。然后再次过滤数据。

Angular 4 - 使用复选框

1 个答案: