如何使用angular 2中的管道过滤列表
你能告诉我如何使用angular 2中的管道来过滤列表吗？
https://stackblitz.com/edit/angular-qvtqeu?file=src%2Fapp%2Fapp.component.html
我试着这样做
<ul class="user-list | filterlist:userenter">
<li *ngFor="let user of users" class="user-list__item">过滤器
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterlist'
})
export class FilterlistPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value.filter(
item => item.first_name.toLowerCase().indexOf(args.toLowerCase()) > -1
);
}
}但是当我在输入字段上输入时，过滤不起作用了？
回答 5
Stack Overflow用户
发布于 2018-06-08 21:25:53
你应该这样做
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterlist'
})
export class FilterlistPipe implements PipeTransform {
transform(value: any, args?: any): any {
if(!args)
return value;
return value.filter(
item => item.first_name.toLowerCase().indexOf(args.toLowerCase()) > -1
);
}
}检查args是否有值，第一次您不会有args ..that的值是它不工作的原因
Stack Overflow用户
发布于 2018-06-08 21:21:01
我们可以使用ng2-search-filter npm。
有关更多详细信息，请访问以下演示：Demo Link
app.module.ts
我们必须安装ng2-search-filter包，然后必须将其导入到app.module.ts中，如下所示。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
// search module
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule, Ng2SearchPipeModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
title = 'Angular Search Using ng2-search-filter';
searchText;
heroes = [
{ id: 11, name: 'Mr. Nice', country: 'India' },
{ id: 12, name: 'Narco' , country: 'USA'},
{ id: 13, name: 'Bombasto' , country: 'UK'},
{ id: 14, name: 'Celeritas' , country: 'Canada'},
{ id: 15, name: 'Magneta' , country: 'Russia'},
{ id: 16, name: 'RubberMan' , country: 'China'},
{ id: 17, name: 'Dynama' , country: 'Germany'},
{ id: 18, name: 'Dr IQ' , country: 'Hong Kong'},
{ id: 19, name: 'Magma' , country: 'South Africa'},
{ id: 20, name: 'Tornado' , country: 'Sri Lanka'}
];
}app.component.html
| ：searchText筛选器将实现过滤的魔力。
*ngFor="let hero of heroes | filter:searchText"因此，让我们将它添加到HTML中的for循环中，在这里我们实际上是在迭代列表。
<div class="container text-center">
<h1>{{title}}</h1>
</div>
<div class="container">
<div class="row">
<div class="search-hero">
<input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder=" Start searching for a hero by id or name or country">
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Hero Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hero of heroes | filter:searchText">
<td>{{hero.id}}</td>
<td>{{hero.name}}</td>
<td>{{hero.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>这将负责从结果列表中过滤数据。希望这能对你有所帮助。
Stack Overflow用户
发布于 2018-06-08 21:39:03
Angular没有提供管道来做这件事的原因是因为它的性能很糟糕。
对于数组中的每一行，您将迭代整个数组。可能每秒重复几次。这不是你想要的。
相反，可以像这样声明你的列表：
allUsers: [];
filteredUsers: [];像现在使用users一样填充allUsers。然后，在searchText更改的每个地方，迭代allUsers并将匹配的用户添加到filteredUsers。这样，如果只有五个用户匹配您的搜索文本，模板只需要迭代五次。
你的循环变成：
<ul class="user-list">
<li *ngFor="let user of filteredUsers" class="user-list__item">
</ul>诸若此类。
我应该补充的是，自从我第一次发布这个答案以来，每当我想减少在模板中完成的工作量时，我也会使用相同的技术。我发现，让模板只迭代一千次在旧的移动设备上性能非常差，甚至在我糟糕的i7开发PC上也会导致明显的延迟。
https://stackoverflow.com/questions/50761509
复制相似问题