Angular 2 循环遍历多个键值并显示在 md 卡中

Question

我在我的 angular 2 应用程序中有一个返回 JSON 的 rest api 调用。JSON 看起来像这样

[
{"devID": "573965739","time": 1500580511805,"service": "demoservice,"version": "1.0.9"},
{"devID": "573965739","time": 1500562423568,"service": "runservice","version": "1.0.8"},
{"devID": "573965739","time": 1500562421146,"service":"timeservice","version": "1.0.4"},
{"devID": "573965739","time": 1500562066888, "service": "testservice","version": "1.0.3"},
{"devID": "111165739","time": 1500580511805,"service": "demoservice,"version": "2.0.9"},
{"devID": "111165739","time": 1500562423568,"service": "runservice","version": "2.0.8"},
{"devID": "111165739","time": 1500562421146,"service":"timeservice","version": "2.0.4"},
{"devID": "111165739","time": 1500562066888, "service": "testservice","version": "2.0.3"}]

我想遍历这个 JSON 并使用角度材料 md 卡显示卡/图块。如何将一个"devID"映射到多个键值并显示在卡片中？例如，第一张卡应包含此devID(573965739(以及链接到它的所有四个服务和版本，第二张卡应包含此devID(111165739(及其链接到它的四个服务和版本。因此，基本上每个卡都应该包含唯一的devID以及与之链接的所有服务和版本。

Answer 1

我通过@yurzui按字段对数据进行分组找到了这个很好的答案。使用他提供的group-by.pipe，您可以通过管道传输数据并将其呈现在md卡上。

.html：

<div>
<div *ngFor="let item of data | groupBy:'devID' ">
<md-card class="z-depth" style="margin-bottom: 10px" >
<md-card-header>
<md-card-title><h3>Dev Id: {{ item.key }}</h3></md-card-title>
</md-card-header>
<md-card-content>
<div *ngFor="let x of item.value"> {{ x | json }}</div>
</md-card-content>  
</md-card>
</div>
</div>

普伦克演示