从服务中按键查询单个 Firebase 对象

Question

我正在使用 Angular CLI + Firebase + AngularFire2 一直在尝试找出如何使用密钥从 Firebase 查询单个对象。

基本流程是显示项目列表，然后单击一个项目将显示该特定项目的详细信息视图。

这应该是一个很常见的用例，但是 AngularFire 2 文档似乎没有给出任何明确的例子来说明我如何做到这一点。

我正在尝试使用服务来查询项目，但我不能完全让它工作。

组件

// COMPONENT

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { AngularFire, FirebaseObjectObservable} from 'angularfire2';
import { Subscription } from 'rxjs';
import { ItemsService } from '../items.service';

@Component({
  selector: 'app-item-detail',
  templateUrl: './item-detail.component.html',
  styleUrls: ['./item-detail.component.css']
})
export class ItemDetailComponent implements OnInit, OnDestroy {

  private subscription: Subscription;
  private item;

  constructor(private af: AngularFire,
              private route: ActivatedRoute,
              private router: Router,
              private itemsService: ItemsService) { }


  ngOnInit() {
    this.subscription = this.route.params.subscribe(
      (param: any) => {
        let id = param['id'];
        console.log('Key: '+ id);
        this.item = this.itemsService.getItem(id);
      }
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

服务

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from "@angular/http";
import { AngularFire, FirebaseObjectObservable, FirebaseListObservable, FirebaseApp } from 'angularfire2';
import 'rxjs/Rx';

@Injectable()
export class ItemsService {

  private items: FirebaseListObservable<any[]>;
  private item: FirebaseObjectObservable<any>;

  constructor(private af: AngularFire) {}

  getItems(num) {
    this.items = this.af.database
      .list('/items', { query: { limitToLast: num | 20} } )
      .map( (arr) => { return arr.reverse() } ) as FirebaseListObservable<any[]>;
    return this.items;
  }

  getItem(id: string) {
    this.item = this.af.database.object('/items/'+id);
    this.item.subscribe(item => {
        console.log(item);
        return item;
      });
  }

}

Answer 1

应该这样做：

// COMPONENT

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { AngularFire, FirebaseObjectObservable} from 'angularfire2';
import { Subscription } from 'rxjs';
import { ItemsService } from '../items.service';

@Component({
  selector: 'app-item-detail',
  templateUrl: './item-detail.component.html',
  styleUrls: ['./item-detail.component.css']
})
export class ItemDetailComponent implements OnInit, OnDestroy {

  private subscription: Subscription;
  private item;

  constructor(private af: AngularFire,
              private route: ActivatedRoute,
              private router: Router,
              private itemsService: ItemsService) { }

  
  ngOnInit() {
    // get id synchronously, don't need it more then once
    const key: string;
    this.route.params.take(1).subscribe(param => key = param["id"]);
    this.subscription = this.itemsService.getItem(id)
      .subscribe(item => this.item = item)
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}


@Injectable()
export class ItemsService {
  ...

  getItem(id: string) {
return this.af.database.object('/items/'+id);
  }

}

尝试在需要数据的地方订阅Observable。您的服务方法应该 return 可观察而不是订阅（除非您确实有充分的理由不这样做）。

从服务中按键查询单个 Firebase 对象

Query single Firebase object by key from a service

firebase

firebase-realtime-database

angularfire2

angular