AngularFire2 v5.0 对象

Question

所以我正在努力思考 AngularFire2。我从 5.0 版开始，最近发生了很多变化，互联网上的大多数内容都已过时。

我现在真正想要实现的是从我的 Angular 数据库中检索一个对象并将数据传递到我的模板。听起来很容易，但显然并非如此。几乎没有文档。

我试着写了一个 getData 函数，像这样：

getData(objPath: string): AngularFireObject<any> {
    // console.log(this.db.list(objPath).valueChanges());
    return this.db.object(objPath).valueChanges();
  }

我收到这个错误：

Type 'Observable<{}>' is not assignable to type 'AngularFireObject'. Property 'query' is missing in type 'Observable<{}>'.

我尝试将 valueChanges() 部分替换为 subscribe() 或其他部分，但它不起作用。如果我只记录 return this.db.object(objPath); 而没有其他任何东西，我会得到这样的结果： {"query":"https://blabla.firebaseio.com/users/Vi37EbcH"}

如何查询这个特定对象@users/Vi37EbcH？请帮忙。

Answer 1

我可能已经修复了它：

constructor(private db: AngularFireDatabase, private route: ActivatedRoute) {
    this.route.params.subscribe(params => (this.path = `users/${params.id}`));
    const userobject = db.object<any>(this.path);
    const users$: Observable<any[]> = userobject.valueChanges();
    users$.subscribe(console.log);
  }

Answer 2

我已经做了一个获取列表和一个项目的完整示例。我使用 snapshotChanges 来为每个项目添加 ID，因为从列表中单击一个项目，然后从 ID 中获取该项目是很常见的。此外，使用 map() 将允许您在项目到达模板之前对其进行转换。

我还使用 subscribe 从 observable 中获取结果，准备在模板中使用。这是示例：

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import { Activity } from '../shared/interfaces/Activity';

@Component({
  selector: 'app-activities',
  templateUrl: './activities.component.html',
  styleUrls: ['./activities.component.scss']
})
export class ActivitiesComponent implements OnInit {

  activitiesCollection: AngularFirestoreCollection<Activity>;
  activitiesDoc: AngularFirestoreDocument<Activity>;
  itemList: Activity[];
  editItem: Activity;

  constructor(public db: AngularFirestore) { }

  ngOnInit() {
    this.activitiesCollection = this.db.collection('activities');
  }

  getActivities() {
    this.activitiesCollection
      .snapshotChanges()
      .map(arr => {
        return arr.map(snap => {
          const obj = snap.payload.doc.data() as Activity;
          obj.id = snap.payload.doc.id;
          return obj;
        });
      })
      .subscribe(response => {
        console.log('getActivities4: subscribe: response: ', response);
        this.itemList = response;
      });
  }

  getActivity(id) {
    this.activitiesDoc = this.activitiesCollection.doc(id);
    this.activitiesDoc
      .snapshotChanges()
      .map(snap => {
        if (snap.payload.exists) {
          const obj = snap.payload.data() as Activity;
          obj.id = snap.payload.id;
          return obj;
        }
      })
      .subscribe(response => {
        this.editItem = response;
      });
  }


}

AngularFire2 v5.0 对象

AngularFire2 v5.0 objects

firebase

angularfire

angularfire2

angular

angular5