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>

因此，无论何时选中任何一项，其值都将为 true。 现在，将此 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（）的 filters对象会从该对象返回一个键数组。就是这样：

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相同，则适用最后一种方法。

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

1 个答案: