角度中的过滤表
角度中的过滤表
提问于 2018-12-05 23:44:49
我有一个表，有两个过滤选项“性别”和“国家”！从本质上说，过滤器起作用了，也就是我点击了男性或女性的性别下拉列表，表中显示了所有的条目。我的问题是，以我所做的方式，我总是必须刷新(就像重新加载数据一样)表，然后才能再次过滤。假设我有针对女性的过滤器，我不能直接点击男性来显示男性条目，我必须刷新，然后我只能再次过滤。我确信这只是一两行代码的问题，但我似乎就是弄不明白。
下面是我的方法：
filterByGender(event) {
let gender = event;
if (gender === "Male") {
gender = "M";
} else if (gender === "Female") {
gender = "F";
}
let filteredGender = this.customerArray
.filter(customer => customer.gender === gender);
console.log("filteredGender", filteredGender);
this.customerArray = filteredGender;
}
filterByCountry(event) {
let country = event;
let filteredCountry = this.customerArray
.filter(customer => customer.countryCode === country);
this.customerArray = filteredCountry;
}
this.customerArray是后台所有客户的数组。现在它不能以我想要的方式工作的原因是因为我重新填充了数组，所以我不能做第二个过滤器，但是有什么方法可以解决这个问题呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-06 00:16:06
如果您想要根据选择框上的选定值过滤表，则可以使用Angular Pipe
根据您的喜好创建了2 Stackblitz演示：
Single Filter Pipe for Table List -仅按性别过滤
Multiple Selection Filter Pipe for Table List -按性别和国家/地区过滤
TableFilterPipe
在模块的声明上导入TableFilterPipe
@Pipe({
name: 'tableFilter'
})
export class TableFilterPipe implements PipeTransform {
transform(list: any[], value: string) {
// If there's a value passed (male or female) it will filter the list otherwise it will return the original unfiltered list.
return value ? list.filter(item => item.gender === value) : list;
}
}CustomComponent
@Component({
...,
template: `
<select [(ngModel)]="gender">
<option value="male">Male</option>
<option value="female">Male</option>
</select>
<table>
...
<tr *ngFor="let user of users | tableFilter: gender"> // Use your pipe here, so whenever there's a change on selectbox, it will filter the list based on the value assigned.
<td>{{ user.name }}</td>
<td>{{ user.gender }}</td>
</tr>
</table>
`
})
export class CustomComponent {
gender: string;
users: any[] = [...];
}Stack Overflow用户
发布于 2020-02-24 11:38:44
transform(items: Incident[], location_id: string, driver_id: string,
description: string, type: string,technician_id: string){
if (items && items.length){
return items.filter(item =>{
if (location_id && item.location_id.name.toLowerCase().indexOf(location_id.toLowerCase()) === -1){
return false;
}
if (driver_id && item.driver_id.name.toLowerCase().indexOf(driver_id.toLowerCase()) === -1){
return false;
}
if (description && item.description.toLowerCase().indexOf(description.toLowerCase()) === -1){
return false;
}
if (type && item.incidenttype_id.name.toLowerCase().indexOf(type.toLowerCase()) === -1){
return false;
}
if (technician_id && item.technician_id.name.toLowerCase().indexOf(technician_id.toLowerCase()) === -1){
return false;
}
return true;
})
}
else{
return items;
}
}
enter code here页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53642506
复制相关文章
相似问题
腾讯云开发者
