javascript - 如何通过手动输入数字和使用angular2过滤来过滤内容

Question

我总共有 4 个字段来过滤表格内容。如果我在过滤器部分中放置 2 个值，它会起作用，如果我在其中再添加一个字段，那么甚至一个都不起作用。任何人都可以帮助我根据电子邮件和电话号码过滤内容。

HTML:上半部分使用过滤数据的代码:

<ng-select [options]="name" [(ngModel)]="filter.name"></ng-select>
      <ng-select [options]="email" [(ngModel)]="filter.email"></ng-select>
      <input type="number" onKeyPress="if(this.value.length==10) return false;" class="form-textbox input-text" [(ngModel)]="filter.phone_number">
      <ng-select [options]="pinAddress" [(ngModel)]="filter.address"></ng-select>

用于过滤表格的管道:

<tbody>
          <tr *ngFor="let pin of pins | pinfilter:filter">
            <td>{{pin.name}}</td>
            <td>{{pin.description}}</td>
            <td>{{pin.address}}</td>
            <td>{{pin.website}}</td>
            <td>{{pin.phone_number}}</td>
            <td>{{pin.email}}</td>
            <td>{{pin.comments}}</td>
          </tr>
        </tbody>

TS:

filter.pipe.ts:
/* Tutorial filter to write filter functions for Tutorial*/
import { Pipe, PipeTransform } from '@angular/core';

export class NewPin { 
  public _id:number;
  public user_id:number;
  public name:string;  
  public address:string;
  public phone_number:string;
  public email:string;
  public comments:boolean;
}

@Pipe({
  name: 'pinfilter',
  pure: false
})

export class PinPipe implements PipeTransform { 
  transform(items: NewPin[], filter: NewPin): NewPin[] { 
    if (!items || (!filter.name && !filter.address)) { 
      return items; 
    } 
      return items.filter((item: NewPin) => this.applyFilter(item, filter)); 
  } 

  applyFilter(user: NewPin, filter: NewPin): boolean {
    console.log(filter);
    if (filter.name && filter.address) { 
      if (filter.name == user.name && filter.address == user.address) { 
        return true 
      } else { 
        return false 
      } 
    } else if (filter.name) { 
        if (filter.name == user.name) { 
          return true 
    } else { 
        return false 
      }  
    } else if (filter.address) { 
      if (filter.address == user.address) { 
        return true 
      } else { 
        return false 
      } 
    } else { 
      return true 
    } 
  } 
}

组件.ts:

public filter: NewPin = new NewPin();

Answer 1

您需要更改 applyFilter 函数，以便它根据要过滤的数据检查所有过滤器属性。

我还建议让它在结构上更简单一些，像这样:

  applyFilter(user: NewPin, filter: NewPin): boolean {
    console.log(filter);
    // check all the filters
    if (filter.name && filter.name != user.name) { 
        return false; 
    } 
    if (filter.address && filter.address != user.address) { 
        return false 
    }  
    if (filter.email && filter.email != user.email) { 
        return false; 
    }  
    if (filter.phone_number && filter.phone_number != user.phone_number) { 
        return false;
    }  
    // if the user passes all the filters, show it
    return true; 
  }