angular – 按服务中的键查询单个Firebase对象

发布时间：2020-12-17 07:15:13 所属栏目：安全来源：网络整理

导读：我正在使用Angular CLI Firebase AngularFire2一直试图弄清楚如何使用密钥从Firebase查询单个对象. 基本流程是显示项目列表,然后单击某个项目将显示该特定项目的详细信息视图. 这应该是一个非常常见的用例,但AngularFire 2文档似乎没有给出任何关于如何做到

我正在使用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;
      });
  }

}

解决方法

这应该这样做：

// COMPONENT

import { Component,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.您的服务方法应该返回Observable而不是Subscription(除非您确实有充分的理由不这样做).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!