基本上，您编写一个管道，然后可以在 *ngFor 指令中使用它。

在您的组件中：

filterargs = {title: 'hello'};
items = [{title: 'hello world'}, {title: 'hello kitty'}, {title: 'foo bar'}];

在您的模板中，您可以将字符串、数字或对象传递给管道以用于过滤：

<li *ngFor="let item of items | myfilter:filterargs">

在您的管道中：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {
        if (!items || !filter) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.title.indexOf(filter.title) !== -1);
    }
}

请记住在 app.module.ts 中注册您的管道；您不再需要在 @Component 中注册管道

import { MyFilterPipe } from './shared/pipes/my-filter.pipe';

@NgModule({
    imports: [
        ..
    ],
    declarations: [
        MyFilterPipe,
    ],
    providers: [
        ..
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

这是一个 Plunker ，它演示了如何使用自定义过滤管道和内置切片管道来限制结果。

请注意（正如几位评论员指出的那样） 有原因的 为什么 Angular 中没有内置过滤管道。

很多人都有很好的方法，但这里的目标是通用的，并定义一个与 *ngFor 相关的所有情况下都极其可重用的数组管道。

callback.pipe.ts （不要忘记将其添加到模块的声明数组中）

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({
    name: 'callback',
    pure: false
})
export class CallbackPipe implements PipeTransform {
    transform(items: any[], callback: (item: any) => boolean): any {
        if (!items || !callback) {
            return items;
        }
        return items.filter(item => callback(item));
    }
}

然后在您的组件中，您需要实现具有以下签名的方法 (item: any) => boolean ，在我的例子中，我将其称为 filterUser，用于过滤年龄大于 18 岁的用户。

您的组件

@Component({
  ....
})
export class UsersComponent {
  filterUser(user: IUser) {
    return !user.age >= 18
  }
}

最后但并非最不重要的是，您的 html 代码将如下所示：

您的 HTML

<li *ngFor="let user of users | callback: filterUser">{{user.name}}</li>

如您所见，此管道在所有需要通过回调进行过滤的数组类项目中都相当通用。在我的例子中，我发现它对于 *ngFor 之类的场景非常有用。

希望这有帮助！！！

codematrix

这是我不使用管道实现的。

component.html

<div *ngFor="let item of filter(itemsList)">

component.ts

@Component({
....
})
export class YourComponent {
  filter(itemList: yourItemType[]): yourItemType[] {
    let result: yourItemType[] = [];
    //your filter logic here
    ...
    ...
    return result;
  }
}