我有一个JSON对象,我需要迭代它并包含一个搜索功能,该功能显示在该键中搜索的键和值。
我使用管道并通过循环键和它的值来实现这一点。
COMPONENT.HTML:
<input type="text" class="form-control" placeholder = "Search"[(ngModel)] = "query" id = "listSearch" #search >
<ul>
<li * ngFor="let key of objectKey()" >
<span>{{ key }}</span>
< table >
<tr * ngFor="let item of (testData[key] | LockFilter:'appName': search.value) as result" >
<td>{{ item.appName }}</td>
< /tr>
< /table>
< /li>
< /ul>
COMPONENT.TS:
testData = {
"MyCat1": [
{
"appName": "Myapp1",
"appCatName": "MyCat1"
},
{
"appName": "Myapp2",
"appCatName": "MyCat1"
}
],
"MyCat2": [
{
"appName": "Myapp3",
"appCatName": "MyCat2"
},
{
"appName": "Myapp4",
"appCatName": "MyCat2"
}
]
}
objectKey() {
return Object.keys(this.testData);
}
PIPE.TS:
transform(items: any[], field: string, value: string): any[] {
if (!items) return [];
if (!value) return items;
return items.filter(str => {
return str[field].toLowerCase().includes(value.toLowerCase());
});
}
搜索前的
预期结果: MyCat1: Myapp1 Myapp2
MyCat2: Myapp3 Myapp4
搜索后:(搜索字符串'1') MyCat1: Myapp1
https://stackoverflow.com/questions/56380127
复制相似问题