Как показать список данных на момент операции поиска?

Question

Мне нужно показать список данных во время операции поиска. По умолчанию список будет пустым. Если произошел какой-либо поиск, соответствующие данные будут показаны в сетке. Если поиск не произошел, список будет пустым. Как этого добиться, используя angular 6. Получение списка данных, которые я использую * ngFor. По умолчанию он показывает все данные в списке. Но в моем сценарии данные отображаются во время поиска.

serach: <input type="text" [(ngModel)]="queryString">

<table>
<thead>
<tr>
<th>first Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data | filter:queryString:'firstname'; let i = index">
<td>{{item.firstname}}</td>
</tr>
</tbody>
</table>

Answer 1

Вы должны создать фильтр

import { Injectable, Pipe, PipeTransform } from '@angular/core';

@Pipe({
 name: 'searchfilter'
})

@Injectable()
export class SearchFilterPipe implements PipeTransform {
 transform(items: any[], searchInTable: any): any[] {
   if (searchInTable === undefined) {
     return null;
   }
   return items.filter(function(x) {
    var add = x.firstname.toLowerCase().includes(searchInTable.toLowerCase());

    return (add);
   });
 }
}

в HTML

serach: <input type="text" [(ngModel)]="searchInTable">

<table>
<thead>
<tr>
<th>first Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data | searchfilter:searchInTable; let i = index">
<td>{{item.firstname}}</td>
</tr>
</tbody>
</table>

в app.module

import { SearchFilterPipe } from '../shared/filters';
declarations: [HomeComponent, SearchFilterPipe],

Answer 2

Попробуйте использовать NgIf для условного сокрытия элемента DOM.

Задать условие NgIf для элемента таблицы, проверяя длину ngmodel поля ввода ввода.

serach: <input type="text" [(ngModel)]="queryString"> <table *ngIf="queryString.length !=0"> </table>

Answer 3

В вашем filter компоненте проверьте длину queryString на основе этого возвращаемого элемента. если длина 0, просто верните пустой массив

   if ( !queryString || queryString.length==0) return [];