Angular 角度2中的自定义管道

我对angular 2框架完全陌生。正在尝试创建自定义筛选器

应用程序组件.ts

import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';

@Component({
    selector: 'my-app',
    providers: [UserService,HTTP_PROVIDERS],
    pipes: [SearchPipe],
    templateUrl : `app/user-template.component.html`,
    styles:[`
      .mt20 { margin-top: 20px; }
      .mt30 { margin-top: 30px; }
    `]    
})

export class AppComponent { 
  private users = [];
  onClick(searchStr){
    console.log("textbox value : ",searchStr.value);
  }
  constructor(private _userService : UserService){
        this._userService.getUsersData().subscribe(
            data => this.users = data
        );
  } 
}

HTML

<div class="row">
    <div class="col-md-4 col-md-offset-4 mt20">
        <div class="input-group">
            <input type="text" class="form-control" #searchStr>
            <span class="input-group-btn">
                    <button class="btn btn-default" type="button" (click)="onClick(searchStr)">Search</button>
            </span>
        </div>
    </div>
</div>
<hr>
<!--       Cards        -->
<div class="container mt30">
    <div class="row">
        <div class="col-md-3" *ngFor="#user of users | search : searchStr, #i=index">
            <div class="card" style="border: 1px solid black; padding:5px; text-align:center;border-radius:5px;">
                <div class="card-block">
                    <h4 class="card-title">{{user.name}}</h4>
                    <h6 class="card-title">{{user.email}}</h6>
                    <p class="card-text">{{user.company.catchPhrase}}</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
            <div *ngIf="i == 3 || 6">
                <br/>
            </div>

        </div>
    </div>
</div>

搜寻

{{user.name}
{{user.email}
{{user.company.catchPhrase}

管道

import {Pipe} from 'angular2/core';

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

export class SearchPipe {
    transform (value, args: any[]){
        return value.filter(
            (item) => { if(value.length > 0){
                    for(var i=0; i< value.length; i++){
                        if(value[i].name == args[0].value || value[i].email == args[0].value){
                            console.log("Filtered Object :",value[i]);
                            return value[i];
                        }else{
                            return;
                        }
                    }
                }
            });
    }
}

从'angular2/core'导入{Pipe}；
@烟斗({
名称：'搜索'，
纯：假
})
导出类搜索管{
转换（值，参数：任意[]）{
返回值.filter(
（项）=>{if（value.length>0）{
对于（变量i=0；i

---

在这里，当页面加载时，我最初并没有得到列表。当我搜索一个字符串（姓名或电子邮件）时，会得到总列表。不知道到底发生了什么。帮助我。

过滤器

接受一个函数，该函数在数组的每个项上运行。它必须返回一个布尔值

您的类实际上应该如下所示：

export class SearchPipe {
  transform (value: any[], args: any[]){
    const search = args[0].value;

    return value.filter(
      (item) => {
          if(item.name == search || item.email == search){
            console.log("Filtered Object :", item);
            return true
          }else{
            return false;
          }
      });
  }
}

或在较短的版本中：

export class SearchPipe {
  transform (value: any[], args: any[]){
    const search = args[0].value;

    return value.filter(item => 
      (item.name == search || item.email == search)
    );
  }
}

不在空搜索字符串上搜索：

export class SearchPipe {
  transform (value: any[], args: any[]){
    const search = args[0].value;

    if (!search) return value;

    return value.filter(item => 
      (item.name == search || item.email == search)
    );
  }
}

---

如果（！value）返回，也许您应该在

转换
的开头检查
null
已尝试，但我在值中获得完整列表。不知道为什么？谢谢你的回复。但是当初始页面加载时，它并没有显示所有的记录，为什么会这样呢？在页面加载时，您的搜索字符串很可能是
”
或
null
，这与所有（如果有的话）元素都不匹配。检查我的编辑。