Typescript 如何使用 *ngFor 显示 json 对象

{
   "-KBN9O_qqz-nZ9tPWFdM":{
      "createdAt":1456399292790,
      "isActive":true,
      "name":"Hero 1"
   },
   "-KBN9gjJw1ZlMgt9pVsl":{
      "createdAt":1456399371220,
      "isActive":true,
      "name":"Hero 2"
   },
   "-KBN9hYI4vYAsyh5k1lX":{
      "createdAt":1456399374548,
      "isActive":true,
      "name":"Hero 3"
   }
}

<li *ngFor="#hero of heroes">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

<span *ngFor="#entry of content | keys">           
  Key: {{entry.key}}, value: {{entry.value}}
</span>

Typescript相关问答推荐

类型安全JSON解析

如何缩小变量访问的对象属性范围？

泛型类型联合将参数转换为Never

我想创建一个只需要一个未定义属性的打字脚本类型

为什么T[数字]不也返回UNDEFINED？

如何在编译时为不带常量的参数引发错误

缩小并集子键后重新构造类型

被推断为原始类型的交集的扩充类型的交集

TS如何不立即将表达式转换为完全不可变？

寻址对象中路径的泛型类型

如何 bootstrap TS编译器为类型化属性`T`推断正确的类型？

根据类型脚本中的泛型属性 Select 类型

如何定义这样一个TypeScript泛型，遍历路由配置树并累积路径

导航链接不触发自定义挂钩

如何提取具有索引签名的类型中定义的键

React-跨组件共享功能的最佳实践

什么'；是并类型A｜B的点，其中B是A的子类？

传入类型参数<；T>；变容函数

剧作家测试未加载本地网址

Typescript 编译错误：TS2339：类型string上不存在属性props