Question

我正在尝试在输入框中的用户输入上过滤数组，但我无法这样做。

我使用的Angular JS 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>

提前致谢

Answer 1

在angular2中，您不需要开箱即用过滤管，您必须自己实施。

在这里阅读： 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);
    }
}

将上述文件另存为'filter-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>
  `
})

如何在Angular 2中过滤用户输入上的数组

2 个答案: