等效于Angular2中的ng-repeat以获取JSON对象的键

时间:2016-02-10 14:13:47

标签: json angular angular2-directives

我正在寻找一种使用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()一起执行,但如果可能,我想使用这些指令。

谢谢!

1 个答案:

答案 0 :(得分:4)

您可以创建执行该操作的自定义管道

MyClass myClass = myData.getMyMap().where().equalTo("key", myKey).firstFirst()
@Pipe({name: 'toKeyValueList'})
export class ToKeyValueListPipe implements PipeTransform {
  transform(value:number, args:string[]) : any {
    return // transform map to a list of keys and values
  }
}

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

不要忘记将管道添加到您要使用它的<div *ngFor="let pair in dataSets | toKeyValueList">{{pair.key}} - {{pair.value}}</div> 注释的pipes: [ToKeyValueListPipe]