Angular 2表搜索管道过滤器不起作用

问题描述

我正在Angular 2中创建一个表组件，在其中创建了一个通用的表搜索过滤器管道，它可以正常工作，但不会在相应的列中显示值。
当我开始在文本框中键入搜索键时，过滤后的值会正确显示，但不会显示在其相应列下。
很抱歉，如果这个问题重复出现，我已经在网络上花了足够的时间，但是我无法找到解决方案。

I am creating a table component in Angular 2, in which I am creating a common table search filter pipe, it is working correctly but not displaying the values in their appropriate columns.When I start typing the search keys in the text box the filtered values are displayed correctly but not under their appropriate columns.Sorry if this question is a duplicated one, I have spent enough time in searching the web but I was unable to get a solution for it.

下面是供您参考的代码

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public tableData: any = [
     {"Name":"Gaurav","Address":"Chennai","Contact":"9632587410"},
     {"Name":"Rakesh","Address":"Goa","Contact":"852397410"}
  ];
}

Pipe.ts

@Pipe({
  name: 'searchPipe'
})
export class searchPipe implements PipeTransform {
   transform(value: any, args: string[]): any {
      let filter = args[0];

      if (filter && Array.isArray(value)) {
         let filterKeys = Object.keys(filter);
         return value.filter(item =>
            filterKeys.reduce((key, keyName) =>
               key && item[keyName].toUpperCase() === filter[keyName].toUpperCase(), true));
      } else {
         return value;
      }
   }
}

component.html

<input type="text" #searchFilter (keyup)="0"/>
<table>
  <tr>
    <th *ngFor="let colValues of tableData | columnPipe">{{colValues}}</th>
  </tr>
  <tr *ngFor="let row of tableData">
    <td *ngFor="let rowValues of row | rowPipe |searchPipe:searchFilter.value">{{rowValues}}</td>
  </tr>
</table>

完全正常工作，帮助我解决问题

Full working Plunker, help me in resolving the issues

推荐答案

我想您想要像这样：

这篇关于Angular 2表搜索管道过滤器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！