在模板angular2中解析和过滤数组对象

时间:2019-02-13 23:47:44

标签: arrays angular7 angular-pipe array-filter

我有一个从服务获得响应的要求,并且在响应内有一个数组,我需要对其进行解析以获得某些结果:

//这是我具有的硬编码数组:

let staticArray = [
{"pid":165, 'value': 'value165'},
{"pid":166, 'value': 'value166'},
{"pid":167, 'value': 'value167'},
{"pid":168, 'value': 'value168'},
{"pid":169, 'value': 'value169'},
{"pid":170, 'value': 'value170'}

]

//这是服务器的响应,这是包含数据数组的obj,我必须对其进行解析才能获得所需的结果:

let responseFromServer = 

{
    "data": [
        {"userData":[], "docs":[{ "pid": 165, "url":"someurl1"},
{ "pid": 167, "url":"someurl1"},
{ "pid": 168, "url":"someurl1"},
{ "pid": 165, "url":"someurl2"},
{ "pid": 167, "url":"someurl2"},
{ "pid": 168, "url":"someurl2"},
{ "pid": 168, "url":"someurl3"},
{ "pid": 165, "url":"someurl3"},
{ "pid": 165, "url":"someurl4"},
{ "pid": 167, "url":"someurl3"}]},

        {"userData":[], "docs":[{ "pid": 166, "url":"someurl1"},
{ "pid": 166, "url":"someurl2"},
{ "pid": 169, "url":"someurl1"},
{ "pid": 169, "url":"someurl2"},
{ "pid": 169, "url":"someurl3"}]},

        {"userData":[], "docs":[{ "pid": 165, "url":"someurl1"}]}
    ]
}

在模板文件中:

<div *ngFor="let data of responseFromServer">

        <div *ngFor='let response of data.docs'>
         response ------
         value165
         someurl1
         count  = 4

        value167
         someurl1
        count = 3

         value168
         someurl1

        count = 3

        response ----------

        value166
        someurl1
        count = 2

        value169
        someurl1
        count = 3

        response ----------

        value165

        someurl1
        count = 1

        </div>
</div>

模板中所需的输出:

responseArr[0] ------
 value165
 someurl1
 count  = 4

value167
 someurl1
count = 3

 value168
 someurl1

count = 3

responseArr[1] ----------

value166
someurl1
count = 2

value169
someurl1
count = 3

responseArr[2] ----------

value165

someurl1
count = 1

当我无法过滤ts文件中的数据而必须在html模板文件中进行过滤时,是否有可能获得预期的结果。

有人可以建议我可以使用的角管吗?

请问我的问题是否含糊。

谢谢!

0 个答案:

没有答案