所有表列上的Angular4 seraching过滤器(Angular4 serarching filter on all the table columns)

这里即时新的Angular4我需要搜索过滤器输入表不是在一个单一的柱

ngOnInit() { this.records= [ { CategoryID: 1, CategoryName: "Beverages", Description: "Coffees, teas" }, { CategoryID: 2, CategoryName: "Condiments", Description: "Sweet and savory sauces" }, { CategoryID: 3, CategoryName: "Confections", Description: "Desserts and candies" }, { CategoryID: 4, CategoryName: "Cheeses", Description: "Smetana, Quark and Cheddar Cheese" } ]; }

这里即时在我的表中实现我的数据

<input type="text" [(ngModel)]="searchText"/> <table class="table table-responsive table-hover"> <tr> <th >Category ID</th> <th>Category</th> <th>Description</th> </tr> <tr *ngFor="let item of records"> <td>{{item.CategoryID}}</td> <td>{{item.CategoryName}}</td> <td>{{item.Description}}</td> </tr> </table>

这是我的搜索管道

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'category' }) export class CategoryPipe implements PipeTransform { transform(categories: any, searchText: any): any { if(searchText == null) return categories; return categories.filter(function(category){ return category.CategoryName.toLowerCase().indexOf(searchText.toLowerCase()) > -1; }) } }

在这里，我要搜索整个列上的记录而不是categoryName

Here im new to Angular4 I need search filter on Enter table not on a single colum

ngOnInit() { this.records= [ { CategoryID: 1, CategoryName: "Beverages", Description: "Coffees, teas" }, { CategoryID: 2, CategoryName: "Condiments", Description: "Sweet and savory sauces" }, { CategoryID: 3, CategoryName: "Confections", Description: "Desserts and candies" }, { CategoryID: 4, CategoryName: "Cheeses", Description: "Smetana, Quark and Cheddar Cheese" } ]; }

Here im implementing my Data in table

<input type="text" [(ngModel)]="searchText"/> <table class="table table-responsive table-hover"> <tr> <th >Category ID</th> <th>Category</th> <th>Description</th> </tr> <tr *ngFor="let item of records"> <td>{{item.CategoryID}}</td> <td>{{item.CategoryName}}</td> <td>{{item.Description}}</td> </tr> </table>

This is my Searching Pipe

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'category' }) export class CategoryPipe implements PipeTransform { transform(categories: any, searchText: any): any { if(searchText == null) return categories; return categories.filter(function(category){ return category.CategoryName.toLowerCase().indexOf(searchText.toLowerCase()) > -1; }) } }

Here i wana to search Records on Entire columns not categoryName

最满意答案

只需在您的过滤管中添加OR条件如下，

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'category' }) export class CategoryPipe implements PipeTransform { transform(categories: any, searchText: any): any { if(searchText == null) return categories; return categories.filter(function(category){ return category.CategoryName.toLowerCase().indexOf(searchText.toLowerCase()) > -1 || category.Description.toLowerCase().indexOf(searchText.toLowerCase()) > -1; }) } }

STACKBLITZ DEMO

Just add OR condition in your filter pipe as follows,

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'category' }) export class CategoryPipe implements PipeTransform { transform(categories: any, searchText: any): any { if(searchText == null) return categories; return categories.filter(function(category){ return category.CategoryName.toLowerCase().indexOf(searchText.toLowerCase()) > -1 || category.Description.toLowerCase().indexOf(searchText.toLowerCase()) > -1; }) } }

STACKBLITZ DEMO

更多推荐