ネストされたカテゴリのデータを取得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>