在多列中搜索angular2答案

【问题标题】：Searching in multiple columns angular2在多列中搜索angular2
【发布时间】：2018-07-17 09:40:53
【问题描述】：

我正在使用 textarea 搜索表格，所有这些都在带有引导程序的 angular2 应用程序中。

我的代码在一列中搜索，现在我希望在两列中查找搜索词，并且用户将看到所有匹配的表行都突出显示。

HTML：

<input class="form-control" id="search" [(ngModel)]="searchString" type="text" placeholder="Search by Book ID.." style="float:right;"
  value="">

<tr *ngFor="let books of bookDetails |jobsearch:{ bookId: searchString} : false | paginate: { itemsPerPage: 50, currentPage: p };">

我要搜索的另一列是“书名”。

【问题讨论】：

什么是«jobsearch»管道？您可以编写一个自定义管道，根据您的逻辑进行过滤
此链接可能对您有所帮助：stackoverflow.com/questions/41672578/…

标签： html angular twitter-bootstrap

【解决方案1】：

自定义管道示例：

@Pipe({
    name: 'booksearch'
})
export class BookSearchPipe implements PipeTransform {
    transform(items: Array<any>, filter: {[key: string]: any }): Array<any> {
        return items.filter(item => {
            let noMatch = Object.keys(filter)
            .find(key => item[key] !== filter[key]);

            return !noMatch;
        });
    }
}

用法：

<tr *ngFor="let books of bookDetails |booksearch:{ bookId: searchString, bookname: searchString }”>

【讨论】：