Grabbing data from nested category Firebase and Angular2

Question

I am having a bit of hard time with this this query, which should be something simpler. I am just trying to displays the keys from my nested categories object. Here is what I have:

//======== 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>

I am able to see the title, and description with no problem. I am not actually using my pipe, the idea is that later on I can use pipe to filter my results. any help would be appreciated.

by the way this is what my database looks like:

Answer 1

You need the 'keys' pipe, e.g. see here How to iterate [object object] using *ngFor in Angular 2 ...

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