javascript - 使用角度管道过滤嵌套对象数组
问题描述
当我搜索年龄、体重、身高和移动设备等数字值时,我正在尝试过滤嵌套数组值以及对象名称。如果与 searchText 匹配,则它必须与对象一起返回特定值,否则返回完整数组而不是未找到消息。
管道.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
transform(items: any, filter: any, defaultFilter: boolean): any {
if (!filter || !Array.isArray(items)) {
return items;
}
if (filter && Array.isArray(items)) {
let filterKeys = Object.keys(filter);
if (defaultFilter) {
return items.filter(item =>
filterKeys.reduce((x, keyName) =>
(x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] == "", true));
}
else {
return items.filter(item => {
return filterKeys.some((keyName) => {
return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] == "";
});
});
}
}
}
}
应用程序.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testJobNestedArray';
searchableList: any;
searchText : string = "";
users : any;
constructor() { }
ngOnInit() {
this.users = [
{
name: 'manpreet',
data:{
age: 25,
weight: 65,
height: 5.6,
mobile: [9780698969, 6895741258]
}
},
{
name: 'abdul',
data: {
age: 26,
weight: 80,
height: 6.0,
mobile: [3698541258]
}
},
{
name: 'onkar',
data: {
age: 28,
weight: 70,
height: 5.8,
mobile: [8569741236, 6528965478]
}
}
]
// this.searchableList = ['name', 'age', 'weight', 'height', 'mobile']
console.log('this.users', this.users)
}
}
应用程序.html
<router-outlet></router-outlet>
<div>
<h1>Nested Array Table</h1>
<div class="md-form">
<input type="text" [(ngModel)]="searchText" class="form-control" name="searchText" placeholder="Search" />
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Age</th>
<th>Weight</th>
<th>Height</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="let item of users| FilterPipe:
{name: searchText, age: searchText, weight: searchText, height: searchText, mobile: searchText}; let i = index">
<td>{{ i+1 }}</td>
<td>{{ item.name }}</td>
<th>{{ item.data.age }}</th>
<td>{{ item.data.weight }}</td>
<td>{{ item.data.height}}</td>
<td>{{ item.data.mobile }}</td>
</tr>
</tbody>
</table>
</div>
解决方案
在 FilterPipe 类中,请更改 else 语句如下
return items.filter(item => {
return filterKeys.some((keyName) => {
return new RegExp(filter[keyName], 'gi').test(item[keyName]) ||
new RegExp(filter[keyName], 'gi').test(item.data[keyName]) ||
filter[keyName] == "";
});
});
问题是缺少数据对象下的属性。请参阅以下链接中的工作代码
推荐阅读
- node.js - node.js 新手发现可能的 PATH 变量错误
- rocksdb - Rocksdb:使用唯一指针关闭数据库时断言“last_ref”失败
- r - 如何在统计测试中/之前以科学计数法显示数字?
- c++ - 子进程退出后内核复制 CoW 页面
- javascript - 想要将嵌套对象转换为查询参数以附加到 url
- python - 为什么对同一个函数有这么多的调用?
- android - 如何使用改造安卓取消下载?
- c# - 将散列的电子邮件存储在字典 .Net 中
- jquery - 如何为内联 JQuery 按钮设置 id
- python - Pandas nunique() 仅用于分类列,否则为 null?