如何使用 *ngFor 显示 json 对象答案

【问题标题】：How to display json object using *ngFor如何使用 *ngFor 显示 json 对象
【发布时间】：2016-06-09 09:52:49
【问题描述】：

我想显示来自 Firebase 的以下数据

{
   "-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"
   }
}

以angular.io Tour of Heroes教程为例

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

所以英雄 id 应该显示例如 -KBN9hYI4vYAsyh5k1lX 并且英雄名称应该显示例如hero 3

我做了一些研究，发现了@Thierry Templier access key and value of object using *ngFor 的这个 stackoverflow 解决方案

(1) 这是解决我问题的正确方法吗？

(2)这个问题有没有更简单的解决方案，因为我觉得开发者使用Angular2来显示这样的json数据真的很常见。

【问题讨论】：

请看stackoverflow.com/a/35540129/5043867
access key and value of object using *ngFor的可能重复

标签： typescript firebase angular

【解决方案1】：

您需要实现一个自定义管道来执行此操作。 ngFor 只支持数组，不支持对象。

这个管道看起来像这样：

@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>

查看这个问题了解更多详情：

access key and value of object using *ngFor

【讨论】：

Hi Thierry，有更简单的解决方案吗？
这里有很好的解释，检查一下 - 如何使用管道：medium.com/front-end-hacking/…
Object.keys(value).forEach(key => { if (value.hasOwnProperty(key)) { keys = [...keys, { key, value: value[key] }]; } });
不需要检查 .hasOwnProperty 因为 Object.keys() 返回自己的属性。 Object.keys() 方法返回给定对象自己的可枚举属性的数组。
这适用于没有# 的Angular5。您还可以使用<input [(ngModel)]="term"> 和*ngFor="#entry of content | keys | filter:term" 添加搜索过滤器。此外，您可以使用keys.push({key: 'key'+'value[key].prop', value: value[key]}) 搜索多个属性。

【解决方案2】：

您可以将键放在一个数组中并 ng-repeat 键。

export class IterateOverObject {
    public arrayOfKeys;

    @Input heros;
    constructor() {
        this.arrayOfKeys = Object.keys(this.heros);
    }
}

<li *ngFor="#key of arrayOfKeys">
  <span class="badge">{{key}}</span> {{heros[key].name}}
</li>

这对我来说看起来很简单。更多信息是here

【讨论】：

简单有效！

【解决方案3】：

Firebase id 称为 $.key。此外，# 现在更改为 let。这对你有用：

<li *ngFor="let hero of heroes">
  <span class="badge">{{hero.$key}}</span> {{hero.name}}
</li>

【讨论】：

【解决方案4】：

Angular 从版本 6.1

开始支持 KeyValuePipe

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

【讨论】：