Question

我在我的angular 2应用程序中有一个rest api调用，返回JSON。 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-card显示卡片/磁贴。如何映射一个＆＃34; devID＆＃34;有多个键值并显示在卡中？例如，第一张卡应包含此devID（573965739）以及链接到它的所有四个服务和版本以及带有此devID（111165739）的第二张卡及其链接的四个服务和版本。因此，基本上每张卡都应包含唯一的devID以及与之关联的所有服务和版本。

Answer 1

@yurzui发现这个很棒answer用于按字段分组数据。使用他提供的group-by.pipe，您可以管道数据并将其呈现在md-card上。

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>

Plunker demo

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

1 个答案: