blocks|key|4448429|text|Angular2中的管道类似于命令行中的管道。每个前面的值的输出在管道之后输入到过滤器中，这使得链接过滤器也变得很容易，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448430|<template+*ngFor="#item+of+itemsList">
++++<div+*ngIf="conditon(item)">{item+%7C+filter1+%7C+filter2}</div>
</template>|code-block|syntax|javascript|4448431|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>pipes in Angular2 are similar to pipes on the command line.  The output of each preceding value is fed into the filter after the pipe which makes it easy to chain filters as well like this:</p>

<pre><code>&lt;template *ngFor="#item of itemsList"&gt;
    &lt;div *ngIf="conditon(item)"&gt;{item | filter1 | filter2}&lt;/div&gt;
&lt;/template&gt;
</code></pre>


blocks|key|4448491|text|基本上，您编写了一个管道，然后可以在*ngFor指令中使用它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4448492|在您的组件中：|4448493|filterargs+=+{title:+'hello'};
items+=+[{title:+'hello+world'},+{title:+'hello+kitty'},+{title:+'foo+bar'}];|code-block|syntax|javascript|4448494|在模板中，您可以将字符串、数字或对象传递给管道以用于过滤：|4448495|<li+*ngFor="let+item+of+items+%7C+myfilter:filterargs">|4448496|在你的管道里：|4448497|import+{+Pipe,+PipeTransform+}+from+'@angular/core';

@Pipe({
++++name:+'myfilter',
++++pure:+false
})
export+class+MyFilterPipe+implements+PipeTransform+{
++++transform(items:+any[],+filter:+Object):+any+{
++++++++if+(!items+%7C%7C+!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);
++++}
}|4448498|请记住在app.module.ts中注册管道；您不再需要在@Component中注册管道|4448499|import+{+MyFilterPipe+}+from+'./shared/pipes/my-filter.pipe';

@NgModule({
++++imports:+[
++++++++..
++++],
++++declarations:+[
++++++++MyFilterPipe,
++++],
++++providers:+[
++++++++..
++++],
++++bootstrap:+[AppComponent]
})
export+class+AppModule+{+}|4448500|Here's+a+Plunker演示了如何使用自定义过滤器管道和内置的slice管道来限制结果。|4448501|请注意(正如一些评论者指出的那样)+there+is+a+reason为什么在Angular中没有内置的过滤器管道。|4448502|entityMap|0|LINK|mutability|MUTABLE|url|https://embed.plnkr.co/l1oTNT/|1|https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe^0|I|6|0|0|0|0|0|0|0|4|D|T|A|0|0|0|G|0|0|I|H|1|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1H|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1J|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|W|3|X|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|1R|8|@]|D|@$9|1S|A|1T|1|1U]]|E|$]]|$1|10|3|11|5|6|7|1V|8|@]|D|@$9|1W|A|1X|1|1Y]]|E|$]]|$1|12|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]|1A|$5|15|16|17|E|$18|1B]]]]

<p>Basically, you write a pipe which you can then use in the <code>*ngFor</code> directive.</p>

<p>In your component:</p>



<pre class="lang-js prettyprint-override"><code>filterargs = {title: 'hello'};
items = [{title: 'hello world'}, {title: 'hello kitty'}, {title: 'foo bar'}];
</code></pre>

<p>In your template, you can pass string, number or object to your pipe to use to filter on:</p>

<pre class="lang-none prettyprint-override"><code>&lt;li *ngFor="let item of items | myfilter:filterargs"&gt;
</code></pre>

<p>In your pipe:</p>

<pre class="lang-js prettyprint-override"><code>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 =&gt; item.title.indexOf(filter.title) !== -1);
    }
}
</code></pre>

<p>Remember to register your pipe in <code>app.module.ts</code>; you no longer need to register the pipes in your <code>@Component</code></p>

<pre class="lang-js prettyprint-override"><code>import { MyFilterPipe } from './shared/pipes/my-filter.pipe';

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

<p><a href="https://embed.plnkr.co/l1oTNT/" rel="noreferrer">Here's a Plunker</a> which demos the use of a custom filter pipe and the built-in slice pipe to limit results.</p>

<p>Please note (as several commentators have pointed out) that <a href="https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe" rel="noreferrer">there is a reason</a> why there are no built-in filter pipes in Angular.</p>


blocks|key|4448548|text|您还可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448549|<template+ngFor+let-item+[ngForOf]="itemsList">
++++<div+*ng-if="conditon(item)"></div>
</template>|code-block|syntax|javascript|4448550|只有当您的项目与条件匹配时，才会显示div|4448551|有关详细信息，请参阅angular+documentation。如果您还需要索引，请使用以下命令：|offset|length|4448552|<template+ngFor+let-item+[ngForOf]="itemsList"+let-i="index">
++++<div+*ng-if="conditon(item,+i)"></div>
</template>|4448553|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/guide/structural-directives.html^0|0|0|0|A|L|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>You could also use the following:</p>

<pre><code>&lt;template ngFor let-item [ngForOf]="itemsList"&gt;
    &lt;div *ng-if="conditon(item)"&gt;&lt;/div&gt;
&lt;/template&gt;
</code></pre>

<p>This will only show the div if your items matches the condition</p>

<p>See the <a href="https://angular.io/docs/ts/latest/guide/structural-directives.html" rel="noreferrer">angular documentation</a> for more information 
If you would also need the index, use the following:</p>

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


blocks|key|4448601|text|简化方式(由于性能问题，仅在小阵列上使用。在大型数组中，您必须通过代码手动创建过滤器)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448602|请参阅：https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe|offset|length|4448603|@Pipe({
++++name:+'filter'
})
@Injectable()
export+class+FilterPipe+implements+PipeTransform+{
++++transform(items:+any[],+field+:+string,+value+:+string):+any[]+{++
++++++if+(!items)+return+[];
++++++if+(!value+%7C%7C+value.length+==+0)+return+items;
++++++return+items.filter(it+=>+
++++++it[field].toLowerCase().indexOf(value.toLowerCase())+!=-1);
++++}
}|code-block|syntax|javascript|4448604|用法：|4448605|<li+*ngFor="let+it+of+its+%7C+filter+:+'name'+:+'value+or+variable'">{{it}}</li>|4448606|如果你使用一个变量作为第二个参数，不要使用引号。|4448607|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe^0|0|4|1W|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Simplified way (Used only on small arrays because of performance issues. In large arrays you have to make the filter manually via code):</p>

<p>See: <a href="https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe" rel="noreferrer">https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe</a></p>

<pre><code>@Pipe({
    name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[], field : string, value : string): any[] {  
      if (!items) return [];
      if (!value || value.length == 0) return items;
      return items.filter(it =&gt; 
      it[field].toLowerCase().indexOf(value.toLowerCase()) !=-1);
    }
}
</code></pre>

<p>Usage:</p>

<pre><code>&lt;li *ngFor="let it of its | filter : 'name' : 'value or variable'"&gt;{{it}}&lt;/li&gt;
</code></pre>

<p>If you use a variable as a second argument, don't use quotes. </p>


blocks|key|4448631|text|我不知道它是什么时候来的，但他们已经做好了slice+pipe。它也有很好的文档记录。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448632|https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html|offset|length|4448633|<p+*ngFor="let+feature+of+content?.keyFeatures+%7C+slice:1:5">
+++{{+feature.description+}}
</p>|code-block|syntax|javascript|4448634|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1Y|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>I'm not sure when it came in but they already made slice pipe that will do that. It's well documented too.</p>

<p><a href="https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html" rel="noreferrer">https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html</a></p>

<pre><code>&lt;p *ngFor="let feature of content?.keyFeatures | slice:1:5"&gt;
   {{ feature.description }}
&lt;/p&gt;
</code></pre>


blocks|key|4448662|text|我喜欢用于应用程序特定过滤器的另一种方法是在组件上使用自定义只读属性，它允许您比使用自定义管道(IMHO)更干净地封装过滤逻辑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448663|例如，如果我想绑定到albumList并在searchText上进行过滤|offset|length|style|CODE|4448664|searchText:+"";
albumList:+Album[]+=+[];

get+filteredAlbumList()+{
++++if+(this.config.searchText+&&+this.config.searchText.length+>+1)+{
++++++var+lsearchText+=+this.config.searchText.toLowerCase();
++++++return+this.albumList.filter((a)+=>
++++++++a.Title.toLowerCase().includes(lsearchText)+%7C%7C
++++++++a.Artist.ArtistName.toLowerCase().includes(lsearchText)
++++++);
++++}
++++return+this.albumList;
}|code-block|syntax|javascript|4448665|要在HTML中绑定，然后可以绑定到只读属性：|4448666|<a+class="list-group-item"
+++++++*ngFor="let+album+of+filteredAlbumList">
</a>|4448667|我发现对于特定于应用程序的专用过滤器，这比管道工作得更好，因为它保留了与过滤器相关的逻辑和组件。|4448668|对于全局可重用的过滤器，管道工作得更好。|4448669|entityMap^0|0|A|9|L|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

<p>Another approach I like to use for application specific filters, is to use a custom read-only property on your component which allows you to encapsulate the filtering logic more cleanly than using a custom pipe (IMHO).</p>

<p>For example, if I want to bind to <code>albumList</code> and filter on <code>searchText</code>:</p>

<pre><code>searchText: "";
albumList: Album[] = [];

get filteredAlbumList() {
    if (this.config.searchText &amp;&amp; this.config.searchText.length &gt; 1) {
      var lsearchText = this.config.searchText.toLowerCase();
      return this.albumList.filter((a) =&gt;
        a.Title.toLowerCase().includes(lsearchText) ||
        a.Artist.ArtistName.toLowerCase().includes(lsearchText)
      );
    }
    return this.albumList;
}
</code></pre>

<p>To bind in the HTML you can then bind to the read-only property:</p>

<pre><code>&lt;a class="list-group-item"
       *ngFor="let album of filteredAlbumList"&gt;
&lt;/a&gt;
</code></pre>

<p>I find for specialized filters that are application specific this works better than a pipe as it keeps the logic related to the filter with the component. </p>

<p>Pipes work better for globally reusable filters.</p>


blocks|key|4448717|text|我已经根据这里和其他地方的答案创建了一个柱塞。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448718|此外，我还必须添加<input>的@Input、@ViewChild和ElementRef，并为它的一个可观察对象创建和subscribe()。|offset|length|style|CODE|4448719|Angular2搜索筛选器：PLUNKR+(更新:插入器不再工作)|4448720|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/WitglQDcZku4ZxHgi5yj?p=preview^0|0|9|7|H|6|O|A|Z|A|1O|B|0|E|6|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]|$D|X|E|Y|F|G]|$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|J|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>I've created a plunker based off of the answers here and elsewhere. </p>

<p>Additionally I had to add an <code>@Input</code>, <code>@ViewChild</code>, and <code>ElementRef</code> of the <code>&lt;input&gt;</code> and create and <code>subscribe()</code> to an observable of it.</p>

<p>Angular2 Search Filter: <a href="https://plnkr.co/edit/WitglQDcZku4ZxHgi5yj?p=preview" rel="nofollow noreferrer">PLUNKR</a> (UPDATE: plunker no longer works)</p>


blocks|key|4448906|text|这是我前段时间创建并在博客上发表的一个例子，其中包括一个有效的plunk。它提供了一个过滤器管道，可以过滤任何对象列表。基本上，您只需在ngFor规范中指定属性和值{key:+value+}。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448907|它与@NateMay的响应没有太大的不同，除了我对它进行了相对详细的解释。|4448908|在我的例子中，我过滤了一些文本(filterText)上的无序列表，用户使用这种标记针对数组中对象的"label“属性输入：|4448909|<ul>
++<li+*ngFor="let+item+of+_items+%7C+filter:{label:+filterText}">{{+item.label+}}</li>
</ul>|code-block|syntax|javascript|4448910|https://long2know.com/2016/11/angular2-filter-pipes/|offset|length|4448911|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1G|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

<p>Here's an example that I created a while back, and blogged about, that includes a working plunk.  It provides a filter pipe that can filter any list of objects.  You basically just specify the property and value {key:value} within your ngFor specification.</p>

<p>It's not a lot different from @NateMay's response, except that I explain it in relatively verbose detail.</p>

<p>In my case, I filtered an unordered list on some text (filterText) the user entered against the "label" property of the objects in my array with this sort of mark-up:</p>

<pre><code>&lt;ul&gt;
  &lt;li *ngFor="let item of _items | filter:{label: filterText}"&gt;{{ item.label }}&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><a href="https://long2know.com/2016/11/angular2-filter-pipes/" rel="nofollow noreferrer">https://long2know.com/2016/11/angular2-filter-pipes/</a></p>


blocks|key|4448845|text|这是我在没有使用管道的情况下实现的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448846|component.html|4448847|<div+*ngFor="let+item+of+filter(itemsList)">|code-block|syntax|javascript|4448848|component.ts|4448849|@Component({
....
})
export+class+YourComponent+{
++filter(itemList:+yourItemType[]):+yourItemType[]+{
++++let+result:+yourItemType[]+=+[];
++++//your+filter+logic+here
++++...
++++...
++++return+result;
++}
}|4448850|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This is what I implemented without using pipe.</p>

<h1>component.html</h1>

<pre><code>&lt;div *ngFor="let item of filter(itemsList)"&gt;
</code></pre>

<h1>component.ts</h1>

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


blocks|key|4449003|text|我创建了以下管道，用于从列表中获取所需的项目。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4449004|import+{+Pipe,+PipeTransform+}+from+'@angular/core';

@Pipe({
++name:+'filter'
})
export+class+FilterPipe+implements+PipeTransform+{

++transform(items:+any[],+filter:+string):+any+{
++++if(!items+%7C%7C+!filter)+{
++++++return+items;
++++}
++++//+To+search+values+only+of+"name"+variable+of+your+object(item)
++++//return+items.filter(item+=>+item.name.toLowerCase().indexOf(filter.toLowerCase())+!==+-1);

++++//+To+search+in+values+of+every+variable+of+your+object(item)
++++return+items.filter(item+=>+JSON.stringify(item).toLowerCase().indexOf(filter.toLowerCase())+!==+-1);
++}

}|code-block|syntax|javascript|4449005|小写转换只是为了匹配不区分大小写的方式。您可以在视图中使用它，如下所示：|4449006|<div>
++<input+type="text"+placeholder="Search+reward"+[(ngModel)]="searchTerm">
</div>
<div>
++<ul>
++++<li+*ngFor="let+reward+of+rewardList+%7C+filter:searchTerm">
++++++<div>
++++++++<img+[src]="reward.imageUrl"/>
++++++++<p>{{reward.name}}</p>
++++++</div>
++++</li>
++</ul>
</div>|4449007|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I created the following pipe for getting desired items from a list.</p>

<pre><code>import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(items: any[], filter: string): any {
    if(!items || !filter) {
      return items;
    }
    // To search values only of "name" variable of your object(item)
    //return items.filter(item =&gt; item.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1);

    // To search in values of every variable of your object(item)
    return items.filter(item =&gt; JSON.stringify(item).toLowerCase().indexOf(filter.toLowerCase()) !== -1);
  }

}
</code></pre>

<p>Lowercase conversion is just to match in case insensitive way.
You can use it in your view like this:-</p>

<pre><code>&lt;div&gt;
  &lt;input type="text" placeholder="Search reward" [(ngModel)]="searchTerm"&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let reward of rewardList | filter:searchTerm"&gt;
      &lt;div&gt;
        &lt;img [src]="reward.imageUrl"/&gt;
        &lt;p&gt;{{reward.name}}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>


blocks|key|4449040|text|理想情况下，您应该为此创建angualr2管道。但是你可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4449041|<ng-container+*ngFor="item+in+itemsList">
++++<div*ngIf="conditon(item)">{{item}}</div>
</ng-container>|code-block|syntax|javascript|4449042|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Ideally you should create angualr 2 pipe for that. But you can do this trick.   </p>

<pre><code>&lt;ng-container *ngFor="item in itemsList"&gt;
    &lt;div*ngIf="conditon(item)"&gt;{{item}}&lt;/div&gt;
&lt;/ng-container&gt;
</code></pre>


blocks|key|4448935|text|管道将是最好的方法。但低于1也可以。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448936|<div+*ng-for="#item+of+itemsList">
++<ng-container+*ng-if="conditon(item)">
++++//+my+code
++</ng-container>
</div>|code-block|syntax|javascript|4448937|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Pipe would be best approach. but below one would also work.</p>

<pre><code>&lt;div *ng-for="#item of itemsList"&gt;
  &lt;ng-container *ng-if="conditon(item)"&gt;
    // my code
  &lt;/ng-container&gt;
&lt;/div&gt;
</code></pre>


blocks|key|4448987|text|这是您的数组|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4448988|products:+any+=+[
++++++++{
++++++++++++"name":+"John-Cena",
++++++++++++++++++++},
++++++++{
++++++++++++"name":+"Brock-Lensar",

++++++++}
++++];|code-block|syntax|javascript|4448989|这是您的ngFor环路滤波器：|4448990|<input+type="text"+[(ngModel)]='filterText'+/>
++++<ul+*ngFor='let+product+of+filterProduct'>
++++++<li>{{product.name+}}</li>
++++</ul>|4448991|在这里我使用了filterProduct+instant+of+products，因为我想保留我的原始数据。在这里，模型_filterText被用作输入box.When，只要有任何更改，setter函数就会被调用。在setFilterText中，调用performProduct将只返回与输入匹配的结果。我使用小写表示不区分大小写。|4448992|filterProduct+=+this.products;
_filterText+:+string;
++++get+filterText()+:+string+{
++++++++return+this._filterText;
++++}

++++set+filterText(value+:+string)+{
++++++++this._filterText+=+value;
++++++++this.filterProduct+=+this._filterText+?+this.performProduct(this._filterText)+:+this.products;

++++}+

++++performProduct(value+:+string+)+:+any+{
++++++++++++value+=+value.toLocaleLowerCase();
++++++++++++return+this.products.filter((+products+:+any+)+=>+
++++++++++++++++products.name.toLocaleLowerCase().indexOf(value)+!==+-1);
++++++++}|4448993|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>This is your array </p>

<pre><code>products: any = [
        {
            "name": "John-Cena",
                    },
        {
            "name": "Brock-Lensar",

        }
    ];
</code></pre>

<p>This is your ngFor loop 
Filter By : </p>

<pre><code>&lt;input type="text" [(ngModel)]='filterText' /&gt;
    &lt;ul *ngFor='let product of filterProduct'&gt;
      &lt;li&gt;{{product.name }}&lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>There I'm using filterProduct instant of products, because i want to preserve my original data.
Here model _filterText is used as a input box.When ever there is any change setter function will call.
In setFilterText performProduct is called it will return the result only those who match with the input. I'm using lower case for case insensitive. </p>

<pre><code>filterProduct = this.products;
_filterText : string;
    get filterText() : string {
        return this._filterText;
    }

    set filterText(value : string) {
        this._filterText = value;
        this.filterProduct = this._filterText ? this.performProduct(this._filterText) : this.products;

    } 

    performProduct(value : string ) : any {
            value = value.toLocaleLowerCase();
            return this.products.filter(( products : any ) =&gt; 
                products.name.toLocaleLowerCase().indexOf(value) !== -1);
        }
</code></pre>


blocks|key|4449137|text|我用谷歌搜索了一下，偶然发现了ng2-search-filter。在中将获取您的对象，并将搜索词应用于查找匹配的所有对象属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4449138|entityMap^0|F|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>After some googling, I came across <code>ng2-search-filter</code>.  In will take your object and apply the search term against all object properties looking for a match.</p>


blocks|key|4449184|text|下面是一个使用Angular+6过滤ngFor的简单解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4449185|​|4449186|<span+*ngFor="item+of+itemsList"++>
++<div+*ngIf="yourCondition(item)">
++++
++++your+code
++++
++</div>
</span>|code-block|syntax|javascript|4449187|4449188|跨度很有用，因为它本身并不代表任何东西。|4449189|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>A simple solution that works with Angular 6  for filtering a ngFor, it's the following:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span *ngFor="item of itemsList"  &gt;
  &lt;div *ngIf="yourCondition(item)"&gt;
    
    your code
    
  &lt;/div&gt;
&lt;/span&gt;</code></pre>
</div>
</div>
</p>
<p>Spans are useful because does not inherently represent anything.</p>


blocks|key|4449082|text|我知道这是一个老生常谈的问题，然而，我认为提供另一种解决方案可能会有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4449083|等同于这个的AngularJS|4449084|<div+*ng-for="#item+of+itemsList"+*ng-if="conditon(item)"></div>|code-block|syntax|javascript|4449085|在Angular+2%2B中，您不能在同一元素上使用*ngFor和*ngIf，因此它将如下所示：|4449086|<div+*ngFor="let+item+of+itemsList">
+++++<div+*ngIf="conditon(item)">
+++++</div>
</div>|4449087|如果不能用作内部容器，请使用ng-container。当你想在你的应用程序中有条件地附加一组元素(即使用*ngIf="foo")，但又不想用另一个元素包装它们时，ng-container是很有用的。|4449088|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I know its an old question, however, I thought it might be helpful to offer another solution.</p>

<p>equivalent of AngularJS of this</p>

<pre><code>&lt;div *ng-for="#item of itemsList" *ng-if="conditon(item)"&gt;&lt;/div&gt;
</code></pre>

<p>in Angular 2+ you cant use *ngFor and *ngIf on a same element, so it will be following:</p>

<pre><code>&lt;div *ngFor="let item of itemsList"&gt;
     &lt;div *ngIf="conditon(item)"&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and if you can not use  as internal container use ng-container instead.
ng-container is useful when you want to conditionally append a group of elements (ie using *ngIf="foo") in your application but don't want to wrap them with another element.</p>


blocks|key|4449221|text|这是我的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4449222|import+{Pipe,+PipeTransform,+Injectable}+from+'@angular/core';

@Pipe({
++++name:+'filter'
})
@Injectable()
export+class+FilterPipe+implements+PipeTransform+{
++++transform(items:+any[],+field+:+string,+value):+any[]+{
++++++if+(!items)+return+[];
++++++if+(!value+%7C%7C+value.length+===+0)+return+items;
++++++return+items.filter(it+=>
++++++it[field]+===+value);
++++}
}|code-block|syntax|javascript|4449223|示例：|4449224|LIST+=+[{id:1,name:'abc'},{id:2,name:'cba'}];
FilterValue+=+1;

<span+*ngFor="let+listItem+of+LIST+%7C+filter+:+'id'+:+FilterValue">
++++++++++++++++++++++++++++++{{listItem+.name}}
++++++++++++++++++++++++++</span>|4449225|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This is my code:</p>

<pre><code>import {Pipe, PipeTransform, Injectable} from '@angular/core';

@Pipe({
    name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[], field : string, value): any[] {
      if (!items) return [];
      if (!value || value.length === 0) return items;
      return items.filter(it =&gt;
      it[field] === value);
    }
}
</code></pre>

<p>Sample:</p>

<pre><code>LIST = [{id:1,name:'abc'},{id:2,name:'cba'}];
FilterValue = 1;

&lt;span *ngFor="let listItem of LIST | filter : 'id' : FilterValue"&gt;
                              {{listItem .name}}
                          &lt;/span&gt;
</code></pre>


blocks|key|4449143|text|我使用的是一个动态过滤器管道|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4449144|源数据：|4449145|items+=+[{foo:+'hello+world'},+{foo:+'lorem+ipsum'},+{foo:+'foo+bar'}];|code-block|syntax|javascript|4449146|在模板中，您可以在任何对象attr中动态设置过滤器：|4449147|<li+*ngFor="let+item+of+items+%7C+filter:{foo:'bar'}">|4449148|管道：|4449149|++import+{+Pipe,+PipeTransform+}+from+'@angular/core';

++@Pipe({
++++name:+'filter',
++})
++export+class+FilterPipe+implements+PipeTransform+{
++++transform(items:+any[],+filter:+Record<string,+any>):+any+{
++++++if+(!items+%7C%7C+!filter)+{
++++++++return+items;
++++++}

++++++const+key+=+Object.keys(filter)[0];
++++++const+value+=+filter[key];

++++++return+items.filter((e)+=>+e[key].indexOf(value)+!==+-1);
++++}
++}|4449150|不要忘记在app.module.ts声明中注册管道|offset|length|style|CODE|4449151|entityMap^0|0|0|0|0|0|0|0|5|D|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|15|8|@$S|16|T|17|U|V]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>There is a dynamic filter pipe that I use</p>
<p>Source data:</p>

<pre class="lang-js prettyprint-override"><code>items = [{foo: 'hello world'}, {foo: 'lorem ipsum'}, {foo: 'foo bar'}];
</code></pre>
<p>In the template you can dinamically set the filter in any object attr:</p>
<pre class="lang-html prettyprint-override"><code>&lt;li *ngFor=&quot;let item of items | filter:{foo:'bar'}&quot;&gt;
</code></pre>
<p>The pipe:</p>
<pre class="lang-ts prettyprint-override"><code>  import { Pipe, PipeTransform } from '@angular/core';

  @Pipe({
    name: 'filter',
  })
  export class FilterPipe implements PipeTransform {
    transform(items: any[], filter: Record&lt;string, any&gt;): any {
      if (!items || !filter) {
        return items;
      }

      const key = Object.keys(filter)[0];
      const value = filter[key];

      return items.filter((e) =&gt; e[key].indexOf(value) !== -1);
    }
  }
</code></pre>
<p>Don't forget to register the pipe in your <code>app.module.ts</code> declarations</p>


blocks|key|4449166|text|下面给出了限制ngFor的最简单、最容易的方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4449167|<li+*ngFor="let+item+of+list+%7C+slice:0:10;+let+i=index"+class="dropdown-item"+>{{item.text}}</li>|4449168|entityMap^0|7|5|0|0|2P|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>Most simple and easy way to limit your <code>ngFor</code> is given below</p>
<p><code>&lt;li *ngFor=&quot;let item of list | slice:0:10; let i=index&quot; class=&quot;dropdown-item&quot; &gt;{{item.text}}&lt;/li&gt;</code></p>


<p>Apparently, Angular 2 will use pipes instead of filters as in Angular1 in conjunction with ng-for to filter results, although the implementation still seems to be vague, with no clear documentation.</p>

<p>Namely what I'm trying to achieve could be viewed from the following perspective</p>

<pre><code>&lt;div *ng-for="#item of itemsList" *ng-if="conditon(item)"&gt;&lt;/div&gt;
</code></pre>

<p>How to implement so using pipes?</p>


How to apply filters to *ngFor?

容器

JSON

显然，Angular 2将使用管道，而不是像在Angular1和ng-for一起使用的过滤器来过滤结果，尽管实现似乎仍然很模糊，没有明确的文档。也就是说，我试图实现的目标可以从以下几个角度来看待<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div...

问如何对*ngFor应用滤镜？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对*ngFor应用滤镜？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对*ngFor应用滤镜？
EN