从嵌套类别Firebase和Angular2中抓取数据

Question

我对这个查询有点困难，这应该更简单。我只是想从嵌套的类别对象中显示键。这就是我所拥有的：

//======== detail.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';

import { FirebaseObjectObservable } from 'angularfire2/database';
import { EventService } from '../event.service';
import { Event } from '../event.model'


@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
  eventId: string;
  eventToDisplay;

  constructor(
    private route: ActivatedRoute,
    private location: Location,
    private eventService: EventService
  ) { }

ngOnInit() {
    this.route.params.forEach((urlParameters) => {
      this.eventId = urlParameters['id'];
    });
    this.eventToDisplay = this.eventService.getEventById(this.eventId);
    this.eventToDisplay.forEach(query =>{
      console.log(query.categories);
    });
  }
  
//================== keys.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    let keys = [];
    for(let key in value){
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }

}

<div>
  <h3>{{(eventToDisplay | async)?.title}}</h3>
  <h3>{{(eventToDisplay | async)?.date}}</h3>
  <h3>{{(eventToDisplay | async)?.location}}</h3>
  <div *ngFor="let category of eventToDisplay | async">
    {{eventToDisplay.categories}}
  </div>
</div>

我能够看到标题和描述没有问题。我实际上并没有使用我的管道，我的想法是，稍后我可以使用管道来过滤我的结果。任何帮助将不胜感激。

这就是我的数据库的样子：

Answer 1

你需要'钥匙'管道，例如见How to iterate [object object] using *ngFor in Angular 2 ......

<div *ngFor="let category of eventToDisplay.categories | async | keys">
  {{category.key}}
</div>