각도 2의 사용자 지정 파이프

Question

저는 앵귤러 2 프레임 워크를 완전히 새롭게했습니다. 사용자 지정 필터를 만들려고합니다.

는

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

여기

난에 목록을 받고 있지 않다

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> 

파이프를 app.component.ts 페이지가로드 될 때 itially. 그리고 문자열 (이름 또는 전자 메일)을 검색하면 전체 목록을 가져옵니다. 정확히 무슨 일이 일어나고 있지 않습니다. 도와주세요.

Answer 1

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