ユーザー入力の配列を角2でフィルタリングする方法

Question

入力ボックスでユーザー入力の配列をフィルタリングしようとしていますが、できません。

私が使用した角度JS 1の方法あなたが箱から出してフィルターパイプを得ることはありませんangular2に予め

Answer 1

で

<div ng-app="myApp" ng-controller="namesCtrl"> 

<p>Type a letter in the input field:</p> 

<p><input type="text" ng-model="test"></p> 

<ul> 
    <li ng-repeat="x in names | filter:test"> 
    {{ x }} 
    </li> 
</ul> 

</div> 

<script> 
angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.names = [ 
     'Jani', 
     'Carl', 
     'Margareth', 
     'Hege', 
     'Joe', 
     'Gustav', 
     'Birgit', 
     'Mary', 
     'Kai' 
    ]; 
}); 
</script> 

おかげで、あなたはそれを自分で実装する必要がありました。

ここにアップ読む： https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

Answer 2

をあなたはこのような独自のパイプ気にいらないようにする必要があります。ファイル以上保存

import {Injectable, Pipe} from 'angular2/core'; 

@Pipe({ 
    name: 'filter' 
}) 
@Injectable() 
export class FilterPipe implements PipeTransform { 
    transform(items: any[], args: any[]): any { 
     return items.filter(item => item.id.indexOf(args[0]) !== -1); 
    } 
} 

'をフィルタpipe.ts'

のようにあなたのコンポーネントでこれを使用してください。

import { FilterPipe } from './filter-pipe'; 

@Component({ 
    selector: 'your-component', 
    pipes: [ FilterPipe ], 
    template: ` 
    <ul> 
     <li *ngFor="#item of (items | filter:some_variable)">{{item.name}}</li> 
    </ul> 
    ` 
})