下面给出了限制ngFor的最简单易行的方法

<li *ngFor="let item of list | slice:0:10;Let i=index" class="dropdown-item" >{{item.text}}</li> .text}

我根据这里和其他地方的答案创建了一个活塞。

此外，我必须添加一个<input>的@Input， @ViewChild和ElementRef，并创建和订阅()到它的一个可观察对象。

Angular2搜索过滤器:PLUNKR(更新:plunker不再工作)

基本上，你写了一个管道，然后在*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的最简单易行的方法

<li *ngFor="let item of list | slice:0:10;Let i=index" class="dropdown-item" >{{item.text}}</li> .text}

你也可以使用以下语句:

<template ngFor let-item [ngForOf]="itemsList">
    <div *ng-if="conditon(item)"></div>
</template>

这将只显示div，如果您的项目符合条件

更多信息请参阅angular文档 如果你还需要索引，请使用以下方法:

<template ngFor let-item [ngForOf]="itemsList" let-i="index">
    <div *ng-if="conditon(item, i)"></div>
</template>

这是我在没有使用管道的情况下实现的。

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