相当于Angular2中的ng-repeat获取JSON对象的键[重复]答案

【问题标题】：Equivalent to ng-repeat in Angular2 to get the keys of JSON object [duplicate]相当于Angular2中的ng-repeat获取JSON对象的键[重复]
【发布时间】：2016-05-20 22:35:24
【问题描述】：

我正在寻找一种使用 Angular2 将 JSON 对象浏览到 HTML 页面的方法。为了得到每个键和每个值。

在 AngularJS 中，可以使用指令 ng-repeat：

<div ng-repeat="(key, data) in dataSets">{{key}}</div>

但在 Angular2 中，我找不到这样做的好方法。

这是我的对象：

Object {name: "Rue Saint-Nestor", oneway: "yes", highway: "residential",   maxspeed: "50", source:maxspeed: "FR:urban"}

我只想分别获取键和值。我知道它可以用Object.keys() 执行，但如果可能的话，我想使用这些指令。

谢谢！

【问题讨论】：

标签： json angular angular2-directives

【解决方案1】：

您可以创建一个自定义管道来执行此操作

@Pipe({name: 'toKeyValueList'})
export class ToKeyValueListPipe implements PipeTransform {
  transform(value:number, args:string[]) : any {
    return // transform map to a list of keys and values
  }
}

<div *ngFor="let pair in dataSets | toKeyValueList">{{pair.key}} - {{pair.value}}</div>

你应该缓存结果，如果输入没有改变，输出不应该改变，否则 Angular 在调试模式下会产生错误消息。

不要忘记将管道添加到您要使用它的@Component() 注释的pipes: [ToKeyValueListPipe] 中。

【讨论】：