使用自定义管道过滤 angular4 中的多个列表答案

【问题标题】：filter multiple lists in angular4 with custom pipes使用自定义管道过滤 angular4 中的多个列表
【发布时间】：2017-12-19 20:59:22
【问题描述】：

我有两个组件，在 admin.component 用户名中我可以过滤，在 vragen.component 我无法过滤，它们是相同的 HTML。为什么我无法访问 vragenSearch。

Angular 的 HTML

<div class="container-fluid">
            <ul>
                <div *ngFor=" let vraag of resultsvragen | sort | filter : vragenSearch; let i = index">
                <li [ngClass]="{'omkringd': vraag.username == this.dataService.UserName, 'omkringdTwee': vraag.username !== this.dataService.UserName }"  (click)="onSelect(vraag, vraag.vraagID)"
                  [ngStyle]="{'background-color':this.markeer[vraag.vraagID]? '#47d147':'none'}">
                   {{vraag.username+": "}} {{vraag.tekst}}
                   <div *ngIf="!this.upvote[vraag.vraagID]">
                        <button class="btn btn-success" (click)="Upvote(vraag.vraagID)"><i class="fa fa-heart-o" aria-hidden="true"></i></button>
                    </div>

Angular 的 HTML

 <ul>
            <div *ngFor="let user of allUsers | filter : usersSearch; let i = index">
            <li>
                {{ user.voornaam + " : " }}  
                <div *ngIf="user.leerkracht">Admin</div>
                <div *ngIf="!user.leerkracht">
                    Geen admin    
                    <button class="btn btn-sm btn-primary" name="maakAdminButton" (click)="maakAdmin(user.id)">Maak admin</button>
                </div>
            </li>
        </div>
        </ul>

角过滤管

import {Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], usersSearch: string, vragenSearch: string){
        if (items && items.length){
            return items.filter(item =>{
              if (usersSearch && item.voornaam.toLowerCase().indexOf(usersSearch.toLowerCase()) === -1){

                    return false;
                }
                if (vragenSearch && item.tekst.toLowerCase().indexOf(vragenSearch.toLowerCase()) === -1){
                    return false;
                }
                return true;
           })
        }
        else{
            return items;
        }
    }
}

【问题讨论】：

标签： angular

【解决方案1】：

根据您的代码 sn-ps，您正在尝试将两个不同的搜索参数传递给您的过滤器管道。注意参数没有命名！

只有参数的顺序很重要。在此处检查多个管道参数的用法： https://angular-2-training-book.rangle.io/handout/pipes/using_pipes.html

所以即使你有那个代码：

let user of allUsers | filter : vragenSearch;

vragenSearch 的值仍将作为 usersSearch 传递到您的过滤器管道中。 https://v2.angular.io/docs/ts/latest/guide/pipes.html

【讨论】：