如何将过滤器应用于*ngFor？

Question

如何将过滤器应用于*ngFor？

显然，Range2将使用管道而不是过滤器(如Angular 1中的过滤器)与ng一起过滤结果，尽管实现似乎仍然是模糊的，没有明确的文档。

也就是说，我想要达到的目标可以从以下的角度来看

<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div>

如何使用管道来实现？

Answer 1

基本上，您可以编写一个管道，然后在*ngFor指令。在你的组成部分中：filterargs&nbsp;=&nbsp;{title:&nbsp;'hello'};items&nbsp;=&nbsp;[{title:&nbsp;'hello&nbsp;world'},&nbsp;{title:&nbsp;'hello&nbsp;kitty'},&nbsp;{title:&nbsp;'foo&nbsp;bar'}];在模板中，可以将字符串、数字或对象传递给管道以用于筛选：<li&nbsp;*ngFor="let&nbsp;item&nbsp;of&nbsp;items&nbsp;|&nbsp;myfilter:filterargs">在你的烟斗里：import&nbsp;{&nbsp;Pipe,&nbsp;PipeTransform&nbsp;}&nbsp;from&nbsp;'@angular/core';@Pipe({ &nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'myfilter', &nbsp;&nbsp;&nbsp;&nbsp;pure:&nbsp;false})export&nbsp;class&nbsp;MyFilterPipe&nbsp;implements&nbsp;PipeTransform&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;transform(items:&nbsp;any[],&nbsp;filter:&nbsp;Object):&nbsp;any&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!items&nbsp;||&nbsp;!filter)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;items; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;filter&nbsp;items&nbsp;array,&nbsp;items&nbsp;which&nbsp;match&nbsp;and&nbsp;return&nbsp;true&nbsp;will&nbsp;be &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;kept,&nbsp;false&nbsp;will&nbsp;be&nbsp;filtered&nbsp;out &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;items.filter(item&nbsp;=>&nbsp;item.title.indexOf(filter.title)&nbsp;!==&nbsp;-1); &nbsp;&nbsp;&nbsp;&nbsp;}}记得把你的烟斗登记在app.module.ts；您不再需要在您的@Componentimport&nbsp;{&nbsp;MyFilterPipe&nbsp;}&nbsp;from&nbsp;'./shared/pipes/my-filter.pipe';@NgModule({ &nbsp;&nbsp;&nbsp;&nbsp;imports:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.. &nbsp;&nbsp;&nbsp;&nbsp;], &nbsp;&nbsp;&nbsp;&nbsp;declarations:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MyFilterPipe, &nbsp;&nbsp;&nbsp;&nbsp;], &nbsp;&nbsp;&nbsp;&nbsp;providers:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.. &nbsp;&nbsp;&nbsp;&nbsp;], &nbsp;&nbsp;&nbsp;&nbsp;bootstrap:&nbsp;[AppComponent]})export&nbsp;class&nbsp;AppModule&nbsp;{&nbsp;}这是一个柱塞它演示了使用自定义过滤管和内置片管来限制结果。请注意(正如几位评论员所指出的)有一个原因为什么没有内置的过滤管道的角度。