Поиск в каждом столбце с использованием разных значений в Angular Pipe - PullRequest
Новая
       8

Поиск в каждом столбце с использованием разных значений в Angular Pipe

0 голосов
/ 20 октября 2019

Я пытаюсь построить канал поискового фильтра для таблицы, имеющей 4 разных столбца. Для каждого столбца есть специальное поле поиска, по которому входные данные должны быть соответствующим образом отфильтрованы. Я нашел трубу, которая работает для разных ключей (имен столбцов), но не для разных значений, т.е. ключей поиска. Что мне нужно сделать?

component.html 

    // ...
    <thead>
        // ...
        <tr>
            <th><input type="text" class="form-control" [(ngModel)]="id"></th>
            <th><input type="text" class="form-control" [(ngModel)]="name"></th>
            <th><input type="text" class="form-control" [(ngModel)]="last"></th>
            <th><input type="text" class="form-control" [(ngModel)]="handle"></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of items | searchFilter : {id : id, name: id}">
            <th scope="row">{{item.id}}</th>
            <td>{{item.name}}</td>
            <td>{{item.last}}</td>
            <td>{{item.handle}}</td>
            <td><i class="fa fa-toggle-on icons-custom"></i></td>
        </tr>
    </tbody>

SearchFilterPipe.ts 

    export class SearchFilterPipe implements PipeTransform {
        transform(items: any, filter: any, defaultFilter: boolean): any {
            if (!filter) {
                return items;
            }

            if (!Array.isArray(items)) {
                return items;
            }

            if (filter && Array.isArray(items)) {
                let filterKeys = Object.keys(filter);

                if (defaultFilter) {
                    return items.filter(item =>
                        filterKeys.reduce((x, keyName) =>
                            (x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] == "", true));
                }
                else {
                    return items.filter(item => {
                        return filterKeys.some((keyName) => {
                            return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] == "";
                        });
                    });
                }
            }
        }
    }
...