Question

在Angular 7项目中，我获得了使用* ngFor显示的以下JSON数据（嵌套结构）。

JSON

[
 {
     1: [
        { 
            "name" : "A"
        },
        { 
            "name" : "B"
        },
        { 
            "name" : "C"
        }
     ],

     2: [
        { 
            "name" : "D"
        },
        { 
            "name" : "E"
        },
        { 
            "name" : "A"
        }
     ]
 }
]

显示代码

<div *ngFor="let data of result | keyvalue">
        <div> 
                {{data.key}}
        </div>
        <div *ngFor="let innerData of data.value;">
           {{innerData.name}}
        </div>
</div>

我想使用角管对嵌套数据结构进行过滤。例如：如果我给出名称“ A”的值。结果应如下所示。

预期的过滤结果

[
 {
     1: [
        { 
            "name" : "A"
        }
     ],

     2: [
        { 
            "name" : "A"
        }
     ]
 }
]

有人帮助我吗？

Answer 1

有什么理由要对其进行过滤？如果您只是不想在某些情况下显示元素，我认为*ngIf并不是一个不错的选择。

ts：

searchOption = ''

html：

    <div *ngFor="let innerData of data.value;">
      <ng-container *ngIf="innerData.name === searchOption">
        {{innerData.name}}
      </ng-container>
    </div>

动态嵌套对象的Angular 7搜索过滤器

1 个答案: