自定义管道在Angular 2中

debugcn 发表于 Dev

纳加朱纳·雷迪

我对angular 2框架完全陌生。尝试创建自定义过滤器。

app.component.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>

管道

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;
                        }
                    }
                }
            });
    }
}

在这里，最初页面加载时我没有得到列表。当我搜索一个字符串（名称或电子邮件）时，得到总计列表。不完全是正在发生的事情。帮我。

j2L4e

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

您的课程实际上应该像这样：

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)
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。