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

Posted 2023-03-13

【中文标题】从嵌套类别 Firebase 和 Angular2 中获取数据

【英文标题】：Grabbing data from nested category Firebase and Angular2

【发布时间】：2018-04-21 12:17:59

【问题描述】：

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

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

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

顺便说一下，这就是我的数据库的样子：

【参考方案1】：

您需要“密钥”管道，例如看这里How to iterate [object object] using *ngFor in Angular 2 ...

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