整个表上的 Angular4 搜索过滤器功能答案

【问题标题】：Angular4 search filter functionality on Entire table整个表上的 Angular4 搜索过滤器功能
【发布时间】：2018-11-21 16:59:47
【问题描述】：

在这里我在表格上实现了小型搜索过滤器，但我的要求是它应该搜索整个表格而不是页面内？

搜索

<label> Search FRom Table:</label> <input (change)="someval($event.target.value)">          


someval(value){
   let data=JSON.stringify(value);
   console.log(data.length);
   this.auction.find(e=>e.uniqueid=data);
   this.GetDashBoardData();
}
GetDashBoardData(){
    var somedata= this.globalService.getBasicInfoData();
    this.auctionRequest = {    
      "loginId": this.userdata.LoginID
    }; 
    return this.httpService.dashbordTheUser2(this.auctionRequest).subscribe((response) => {
      this.auction = response.data;
}

在这里我稍微改变一下，就像当我在文本框中输入一些文本时，它在 This.auction 数组中的 fing 但我不知道如何在表格中绑定它

<tr *ngFor="let value of pagedItems">
                     <td>{{value.name}}</td>

【问题讨论】：

如果您在返回前将此行放入过滤器中，控制台的输出是什么？ console.log('result: ', customers.filter(customer => customer.email.toLowerCase().indexOf(args[0].toLowerCase()) !== -1));
@DiabolicWords 显示第一条记录
Krishna Rathore 的回答看起来很有希望。你试过了吗？
不，这是按照 oaging 进行过滤
对不起，我没有更多的想法。

标签： angular angular2-forms angular4-forms angular2-filtering

【解决方案1】：

你可以试试这个解决方案

我在stackblitz创建了一个演示

搜索管道

transform(value: any, args?: any): any {
    if (!args) {
      return value;
    }
    return value.filter((val) => {
      let rVal = (val.id.toLocaleLowerCase().includes(args)) || (val.email.toLocaleLowerCase().includes(args));
      return rVal;
    })

}

html代码

<tr *ngFor="let customer of users | customerEmailFilter:email;let i = index">
    <th scope="row">{{i+1}}</th>
    <td>{{customer.id}}</td>
    <td>{{customer.email}}</td>
</tr>

ts文件代码

users=[{
    id:'123',
    email:'abc@gmail.com'
  },{
    id:'1234',
    email:'xyz@hotmail.com'
  },{
    id:'12345',
    email:'jsgsbh@kk.com'
  },{
    id:'123456',
    email:'test@gmail.com'
}]

【讨论】：