带有布尔复选框的角度搜索过滤器

Question

我是 Angular 的新手，我有一个组件列表，我想根据一些复选框过滤这些组件，使用管道，但我不知道如何实现这一点。

到目前为止我有一个界面

export interface Parking {
    multiple: boolean;
    public: boolean;
    name: string;
}

管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    
    return null;
 
  }

}

搜索组件

<form>
  
    <div class="form-group mt-2">
         <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox">
          <label class="form-check-label" for="inlineCheckbox1" >Public</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox">
          <label class="form-check-label" for="inlineCheckbox2" >Private</label>
        </div>
    
         <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox">
          <label class="form-check-label" for="inlineCheckbox1" >Single</label>
        </div>
        
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox">
          <label class="form-check-label" for="inlineCheckbox1" >Multiple</label>
        </div>
        
    </div>
</form>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})

export class FilterComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

并在用于显示组件的模板中（map.component.html）

<div *ngFor="let parking of (parkings | filter)">
{{parking.name}}
</div>

我不知道如何在选中时继续根据复选框进行过滤

谢谢！

Answer 1

让我们创建一个包含所有过滤器选项的对象，并将它们初始化为false 。

export class FilterComponent implements OnInit {
  
  public filters = {
    public: false,
    private: false,
    single: false,
    multiple: false,
  }

  constructor() { }

  ngOnInit(): void {
  }

}

现在像这样将它们绑定到您的模板中

<form>
  
    <div class="form-group mt-2">
         <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" [(ngModel)]="filter.public">
          <label class="form-check-label" for="inlineCheckbox1" >Public</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" [(ngModel)]="filter.private">
          <label class="form-check-label" for="inlineCheckbox2" >Private</label>
        </div>
    
         <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" [(ngModel)]="filter.single">
          <label class="form-check-label" for="inlineCheckbox1" >Single</label>
        </div>
        
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" [(ngModel)]="filter.multiple">
          <label class="form-check-label" for="inlineCheckbox1" >Multiple</label>
        </div>
        
    </div>
</form>

因此，无论何时检查这些中的任何一个，它的值都将为真。 现在，将此过滤器对象传递给您的管道： parkings | filter : filters parkings | filter : filters

<div *ngFor="let parking of (parkings | filter : filters)">
  {{parking.name}}
</div>

并将它们放入您的过滤器中

transform(values: Parking[], filters:any): Parking[]{
  
  // In case this is not getting any filters object, just return the same array
  if(!filters)
    return values;


  /*** If actually got filters, just use the filter() method that arrays have ***/

  // If you checked the "public" checkbox this if() statement will be solved to true
  // so executates this filtering
  if(filters.public){
    // This is gonna filter array and return only current items where public is true
    values = values.filter(item => item.public); // item => item.public == true
  }

  if(filters.multiple){
    // This is gonna filter the filtered array again, so if you already
    // excluded the private ones (so if parking.public is false),
    // now based on that results you will keep 
    values = values.filter(item => item.multiple);
  }

  return values;

}

这样您就可以继续过滤。 我正在手动执行每个过滤器，以防您想添加不同的条件等，但让我们假设您有一个包含 10 个过滤器的列表，其中条件始终相同： values = values.filter(item => item.something == true); 您可以通过使用Object.keys()循环过滤器对象来简化这一点，从对象返回一个键数组。 像这样：

transform(values: Parking[], filters:any): Parking[]{
  
  if(!filters)
    return values;

  Object.keys(filters).forEach(key => {
    if(filters[key]){
      values = values.filter(item => item[key]);
    }
  })

  return values;

}

注意：如果您的停车属性与filters属性相同，则最后一种方法适用。