Угловой 2 Фильтр труб для поиска таблицы не работает

Question

Создавая компонент таблицы в угловом 2, в котором я создаю обычный фильтр поиска в поисковых системах, он работает правильно, но не отображает значения в соответствующих столбцах, когда я начинаю вводить seach keys в текстовом поле, отфильтрованные значения отображаются правильно, но не под их соответствующими столбцами. Извините, если этот вопрос дублируется, я потратил достаточно времени на поиск в Интернете, но не смог получить решение для него,

Ниже приведен код для вашей справки

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

Вы не хотите, чтобы "скрыть" весь td, вместо этого вы просто хотите, чтобы "скрыть" значение ..

@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> 

UPDATE

Чтобы показать всю строку, вы должны отфильтровать ваш 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].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