Angular 2 Table 搜索管道过滤器不工作

Question

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

下面是代码供大家参考

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>

全力以赴Plunker，帮我解决问题

Answer 1

我猜你想要这样：https://plnkr.co/edit/olkIEiOc67Ld28NuASef?p=preview

您不想 "hide" 整个 td，而是只想 "hide" 值..

@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));
    }
    // new case !
    else if (filter && typeof value === 'string') {
      return value.toUpperCase().indexOf(filter.toUpperCase()) >= 0 ? value : '';
    }
    else {
      return value;
    }
  }
}

<td *ngFor="let rowValues of row | rowPipe">{{ rowValues | searchPipe : searchFilter.value }}</td>

更新

要显示整行，您必须过滤 tableData。

像这样改变你的管道：

@Pipe({
  name: 'searchPipe'
})
export class searchPipe implements PipeTransform {
  transform(values: any[], filter: string): any {
    if (!values || !values.length) return [];
    if (!filter) return values;

    filter = filter.toUpperCase();

    if (filter && Array.isArray(values)) {
      const keys = Object.keys(values[0]);
      return values.filter(v => v && keys.some(k => v[k] && v[k].toString().toUpperCase().indexOf(filter) >= 0));
    }
  }
}

<tr *ngFor="let row of tableData | searchPipe : searchFilter.value">
  <td *ngFor="let rowValues of row | rowPipe">{{ rowValues }}</td>
</tr>

现场演示：https://plnkr.co/edit/jXfqfCuJpKdw9HtL569T?p=preview

Angular 2 Table 搜索管道过滤器不工作

Angular 2 Table Search Pipe Filter not working

angular2-pipe

angular