如何過濾Angular 2中的用戶輸入上的數組

Question

正試圖在輸入框中的用戶輸入上過濾數組，但無法這樣做。

在角JS 1我採用的方法是提前

Answer 1

在angular2你沒有得到管道過濾器開箱

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