如何在Angular 6的Angular Pipe中过滤对象内部的对象字段?

时间:2019-04-03 06:17:09

标签: angular angular-pipe

我正在使用Angular 6 Pipe。我想从表字段中过滤或搜索。我已将列表数据加载到表中。我创建了一个自定义管道文件。我可以从列表中过滤或搜索类似(applicant.vivaBoardId)的对象,但是无法从对象内部的对象(applicant.studentInfo.formSerialNo或Applicant.studentInfo.firstName)字段中进行过滤或搜索。

//管道过滤器代码

@Pipe({
name: 'searchFilters'
})
export class IdAndNameFilterPipe 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] == "";
                });
            });
        }
    }
}

}

// html代码

    <input placeholder="Search by Form Sl" name="searchFilter [(ngModel)]="searchFilter">
    <table>
       <thead>
           <tr>
               <th>Form SL</th><th>Name</th><th>Viva Board Id</th><th>Viva Marks</th>
           </tr>
       </thead>
       <tbody>
           <tr *ngFor="let applicant of applicantListForVivaMarksEntry | searchFilters: {formSerialNo: searchFilter}">
               <td>{{applicant.studentInfo.formSerialNo}}</td>
               <td>{{applicant.studentInfo.firstName}}</td>
               <td>{{applicant.vivaBoardId}}</td>
            </tr>
        </tbody>
     </table>

0 个答案:

没有答案