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

【问题标题】：Angular 2 loop through multiple key values and display in md-cardAngular 2循环遍历多个键值并显示在md-card中
【发布时间】：2017-12-27 05:49:49
【问题描述】：

我的 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-card 显示卡片/图块。如何将一个“devID”映射到多个键值并显示在卡片中？例如，第一张卡应包含此 devID (573965739) 以及与其链接的所有四个服务和版本，第二张卡应包含此 devID (111165739) 及其链接的四个服务和版本。因此，基本上每张卡都应该包含唯一的 devID 以及与之链接的所有服务和版本。

【问题讨论】：

@Jota.Toledo 试图找到合适的数据结构，其中一个对象可以有多个键值对并循环遍历它。 c#中的HashTable之类的东西
这仍然不能回答我的问题，如果你有一些 c# 背景，你现在正在寻找的是 typescript/js 的 groupBy 等价物。在谷歌中寻找，你应该会找到一些可能的解决方案

标签： arrays json angular typescript angular-material2

【解决方案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

【讨论】：

我尝试实现管道，但收到此错误Argument of type '{ providers: typeof ServiceVersion[]; templateUrl: string; pipes: typeof GroupByPipe[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'pipes' does not exist in type 'Component'.
Here 是您遇到的完全相同错误的答案。您还可以查看我提供的Plunker example，了解 Pipe 在组件中的设置和使用方式。
嗨，我使用的是 Typescript - 2.2.2，这个语法适用于 typescript 1.7？我收到一些 Typescript 错误
我已经更新了 Pipe 代码并在 TS 2.3.4 中进行了测试，请再次查看 plunker 演示以获取新代码。