问如何通过手动键入数字和使用angular2进行过滤来过滤内容
EN

Stack Overflow用户

提问于 2018-03-22 03:39:38

回答 1查看 64关注 0票数 2

我总共有4个字段来过滤表格中的内容。如果我在filter部分中添加了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 
    } 
  } 
}

component.ts：

public filter: NewPin = new NewPin();

javascript

angular

typescript

人脸识别特惠活动

精准实时的人脸检测、分析、识别等服务，在线、离线满足多样需求，可应用于智慧零售、智慧社区、在线娱乐等多种应用场景

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-22 05:27:35

您需要更改您的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; 
  }