我有一个包含 100 多个对象的数组,我使用 *ngFor 来显示对象。 如何使用多个复选框过滤这些对象?
*如何选择巴黎和伦敦以及 30 岁以下的员工? 当相关复选框为 true 时 *
在 DOM 更改中获得最佳性能的最佳方法是什么?
export class showEmployees implements OnInit {
constructor() { }
ngOnInit() { }
employees: any[] = [
{ city: 'paris', gender: 'male', age: 27 },
{ city: 'london', gender: 'female', age: 55 },
{ city: 'chicago', gender: 'male', age: 26 },
{ city: 'paris', gender: 'female', age: 56 },
{ city: 'london', gender: 'male', age: 60 },
{ city: 'chicago', gender: 'female', age: 24 },
{ city: 'london', gender: 'male', age: 54 },
{ city: 'paris', gender: 'female', age: 22 },
];
list = this.employees;
employeesFiltered = this.employees.slice();
filterByParis(event) {
if (event.target.value === 'paris' && event.target.checked) {
this.employeesFiltered = this.employees.filter(
item => item.city === 'paris'
);
this.list = this.employeesFiltered
} else {
this.list = this.employees
}
}
filterByOld(event) {
if (event.target.value === 'old' && event.target.checked) {
this.employeesFiltered = this.employees.filter(
item => item.age > 50
);
this.list = this.employeesFiltered
} else {
this.list = this.employees
}
}
}
<ul>
<li> <input type="checkbox" value="paris" (change)="filterByParis($event)">paris</li>
<li> <input type="checkbox" value="london" (change)="filterByLondon($event)">london </li>
<li> <input type="checkbox" value="chicago" (change)="filterByChicago($event)">chicago </li>
<li> <input type="checkbox" value="male" (change)="filterByMale($event)">male </li>
<li> <input type="checkbox" value="female" (change)="filterByFemale($event)">female </li>
<li> <input type="checkbox" value="old" (change)="filterByOld($event)"> greater than 50 </li>
<li> <input type="checkbox" value="young" (change)="filterByYoung($event)">under 30 </li>
</ul>
<table>
<thead>
<th>city</th>
<th>gender</th>
<th>age</th>
</thead>
<tbody>
<tr *ngFor="let member of list">
<td>{{member.city}}</td>
<td>{{member.gender}}</td>
<td>{{member.age}}</td>
</tr>
</tbody>
</table>
角管是这种情况的最佳实践吗?角管是这种情况的最佳实践吗?
不使用
管道,但你只需要一个函数过滤器,并使用数组和[(ngModel(]重新思考你的代码。想象一下,你有一个对象数组,比如
selects=[
{description:"París",type:"pais",data:"paris",value:false},
{description:"London",type:"pais",data:"london",value:false},
..
{description:"Male",type:"gender",data:"male",value:false},
{description:"Female",type:"gender",data:"female",value:false}
...
]
你可以做一个.html喜欢
<ul>
<li *ngFor="let select of selects>
<input type="checkbox" [(ngModel)]="select.value"
(change)="refresh()">{{select.data}}
</li>
</ul>
你的函数刷新((可以像
refresh()
{
if (this.selects.find(x=>x.value)) //if there are al least one filter
{
this.employeesFiltered = null;
this.selects.forEach(select=>{
if (select.value)
{
switch(select.type)
{
case "pais":
this.employeesFiltered=this.employeesFiltered ?
this.employeesFiltered.filter(e=>e.pais==select.data) :
this.employees.filter(e=>e.pais==select.data)
break;
case "gender":
....
...
}
}
}
})
}
else
this.employeesFiltered = this.employees;
}