Question

我想在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数据真的很常见。

Answer 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

Answer 2

您可以将键放入数组中并重复键重复。

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

Answer 3

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

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

Answer 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']]);
}

更多信息：https://angular.io/api/common/KeyValuePipe

如何使用* ngFor显示json对象

4 个答案: