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

Question

我在我的 angular 2 申请 returns JSON 中休息 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 并使用 angular material md-card 显示 cards/tiles。如何将一个 "devID" 映射到多个键值并显示在卡片中？例如，第一张卡应包含此 devID (573965739) 以及与其链接的所有四个服务和版本，第二张卡应包含此 devID (111165739) 及其链接的四个服务和版本。因此，基本上每张卡都应包含唯一的 devID 以及与其相关联的所有服务和版本。

Answer 1

我发现@yurzui 的这个很棒，可以按字段对数据进行分组。使用他提供的 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中

Angular 2 loop through multiple key values and display in md-card

arrays

json

typescript

angular-material2

angular