Разделительный фильтр Angular4 на все столбцы таблицы - PullRequest
Новая
       22

Разделительный фильтр Angular4 на все столбцы таблицы

0 голосов
/ 08 июня 2018

Здесь я новичок в 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;
    })
  }
}

Здесь я хочу искать записи по всем столбцам, кроме категорииName

1 Ответ

0 голосов
/ 09 июня 2018

Просто добавьте условие ИЛИ в трубу фильтра следующим образом: 

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

...