Question

我希望从一个管道中过滤多个列，我似乎无法正确使用它。我设法让它与搜索单个列而不是多个列一起工作。我已尝试实施this stackoverflow answer，但我收到错误

错误TypeError：无法将undefined或null转换为object。

以下是我的单列代码：

@Pipe({
    name: 'filter'
})

@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[], field: string, value: string): any[] {
        if (!items) {
            return [];
        }
        if (!field || !value) {
            return items;
        }
        return items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()));
}
}

Html
 <tr *ngFor="let user of users | orderby: {property: column, direction: direction} | filter : 'FirstName' : searchString; let i = index"> 
    <td>{{user.Salutation.Description}}</td>
    <td>{{user.FirstName}}</td>
    <td>{{user.Surname}}</td>
    <td>{{user.Region.Description === "None" ? "-" : 
        user.Region.Description</td>
<td>{{user.Institution === null ? "-" : user.Institution}}</td>
<td>{{user.PrimaryResearchField.Description === "None" ? "-" : user.PrimaryResearchField.Description}}</td>
<td>{{user.OrcidID === null ? "-" : user.OrcidID}}</td>
</tr>

感谢任何帮助。

由于

Answer 1

嗨，我已经在我的同事中以这种方式实现了

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


@Pipe({
    name: 'filter',
    pure: false
})

export class FilterPipe implements PipeTransform {
    transform(items: any[], field : any, value : string): any[] {  
        if (!items) return [];   
        if(typeof field == 'string'){ 
            let rtItems:any = items;
            try{
                rtItems = items.filter(it => it[field].toLowerCase().indexOf(value.toLowerCase()) > -1 );
            }finally{
                return rtItems;
            }
        }else{ 
            let rtItems:any = items;
            try{
                rtItems = items.filter(it => {
                    for(let f of field){
                        if(it[f].toLowerCase().indexOf(value.toLowerCase()) > -1){
                            return true;
                        }
                    }
                });
            }finally{
                return rtItems;
            }
        }


    }
}

，并且在html中，您可以将其用于“多个”

*ngFor="let booking of bookings | filter:['name','number','date']:searchKey"

或者这样的单身

*ngFor="let booking of bookings | filter:'name':searchKey"

请告诉我它是否可行

使用奇异过滤管Angular 2/4过滤多个柱

1 个答案: