如何在ngFor结果中进行搜索？
如何在ngFor结果中进行搜索？
提问于 2019-05-30 22:22:54
我有一个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
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-30 23:19:16
试试这个：
<input [(ngModel)]="search" />
<ul>
<li *ngFor="let key of objectKey()" [hidden]="!(testData[key] | LockFilter:'appName': search).length">
<span>{{ key }}</span>
<table>
<tr *ngFor="let item of (testData[key] | LockFilter:'appName': search) as result">
<td> {{ item.appName }}</td>
</tr>
</table>
</li>
</ul>Stack Overflow用户
发布于 2019-05-31 06:59:44
尝尝这个
// check if exists and will return the keys
objectKey(value) {
return Object.entries(this.testData)
.filter(data=> (data[1].filter(item=> item[value].includes(this.search)).length))
.map([KEY, VAL] => KEY)
}在HTML中(相同代码)
<ul>
<li *ngFor="let key of objectKey('appName')" >
<span >{{ key }}</span>
<table>
<tr *ngFor="let item of (testData[key] | LockFilter:'appName': search) as result" >
<td > {{ item.appName }}</td>
</tr>
</table>
</li>
</ul> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56380127
复制相关文章
相似问题