Question

我将猫鼬中的数据带到HTML表格中显示。我能够正常过滤JSON对象，但无法过滤嵌套的JSON对象？

我已经使用“ npm i ng2-search-filter --save”导入过滤器管道，但这仅适用于第一级。不对嵌套的JSON对象进行过滤。

我的JSON对象是：

{
    packageName:test,
    packagePrice:200,
    userid:{
        userName:John,
        userAge: 27
    }
}

     <input type="text" class="form-control" [(ngModel)]="searchtext" 
     placeholder="Search">

      <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">Package Name</th>
          <th scope="col">Package Price</th>
          <th scope="col">Customer Name</th>
          <th scope="col">Customer Age</th>
        </tr>
      </thead>
      <tbody *ngFor="let use of user | filter:searchtext">
        <tr class="table-active">
          <td> {{use.packageName}}</td>
          <td>{{use.packagePrice}}</td>
          <td>{{use.userid.userName}}</td>
          <td>{{use.userid.userAge}}</td>       
        </tr>
      </tbody>
    </table>

当我在用于搜索过滤器的文本框中输入packageName和packagPrice时，它会过滤掉并向我显示正确的结果，但是在userName和userAge上它不起作用。请帮忙。谢谢。

Answer 1

您可以为此使用custom search pipe

我在Stackblitz上创建了演示

searchPipe.ts

transform(value: any, searchText?: any): any {
    if(!value) return [];
    if(!searchText) return value;
    searchText = searchText.toLowerCase();
    return value.filter( it => {
      return it.packageName.toLowerCase().includes(searchText) || it.packagePrice.toString().includes(searchText) || (it.userid &&  it.userid.userAge.toString().includes(searchText) || it.userid.userName.toLowerCase().includes(searchText));
    });
}

component.html

<tr class="table-active" *ngFor="let use of user | search:searchtext">
    <td> {{use.packageName}}</td>
    <td>{{use.packagePrice}}</td>
    <td>{{use.userid.userName}}</td>
    <td>{{use.userid.userAge}}</td>       
</tr>

Answer 2

我通过安装最新版本ng2 search filter解决了这个问题。

运行以下命令：

npm i ng2-search-filter@0.5.1

Answer 3

尝试以下方法：-

function getResult(filterBy, objList) {
return objList.hightlights.filter(function(obj) {
return obj.queries.some(function(item){
 return item.indexOf(filterBy) >= 0;
});
});
}

如何在Angular中为嵌套JSON对象使用搜索过滤器？

3 个答案: