如何在服务中订阅 Firestore observable。角 7

Question

我已经多次尝试创建一个 Angular 7 服务，该服务将从 Firestore 返回一个 observable，但最新版本不返回任何数据（迄今为止最好的结果）；我使用 Angularfire2 是因为它应该是为 observables 设计的并且更易于使用。

我的服务是 data4eatery.ts:

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs';

import { IeTables } from './../components/models/eateries-model';

@Injectable({
  providedIn: 'root'
})
export class Data4eateryService {
  tablesCollection: AngularFirestoreCollection<IeTables>;
  tables: Observable<IeTables[]>;

  constructor(private afs: AngularFirestore) { }

  getTables() {
    this.tablesCollection = this.afs.
      collection('eEatery').doc('J3XTNqSWGzmU4261BDHD'). //hard coded for testing
      collection('eTable');
    this.tables = this.tablesCollection.valueChanges();
    return this.tables;
  }
}

调用组件的代码：

tables: IeTables[] = [];

  constructor( private data4eateryservice: Data4eateryService) { }

  ngOnInit() {
    const tablesObservable = this.data4eateryservice.getTables();
    tablesObservable.subscribe((tablesData: IeTables[]) => {
      this.tables = tablesData;
    });

    console.log('Tables', this.tables);
  }

这会返回表格 []

我发现的所有教程都从同一组件中的常量返回可观察值。几周来我一直在尝试解决这个问题，所以请帮助我。

Answer 1

observable 执行异步操作。所以你需要在 subscribe 回调被调用之后赋值，如下所示：

  tables: IeTables[] = [];

  constructor( private data4eateryservice: Data4eateryService) { }

  ngOnInit() {
    const tablesObservable = this.data4eateryservice.getTables();

    console.log('1 - OnInit Called');
    tablesObservable.subscribe((tablesData: IeTables[]) => {
      this.tables = tablesData;
      console.log('2 - this.tables is set');
    });

    console.log('3 - After subscription');
  }

以上代码输出到控制台如下：

1 - 调用 OnInit

3 - 订阅后

2 - this.tables 已设置

因此，在订阅返回值之前不会设置this.tables。所以你需要像这样将console.log 移动到subscribe 回调内部：

   ngOnInit() {
    const tablesObservable = this.data4eateryservice.getTables();
    tablesObservable.subscribe((tablesData: IeTables[]) => {
      this.tables = tablesData;
      console.log('this.tables: ',this.tables);
    });
  }

---

我认为您需要从RxJS 更熟悉Observable 的基础知识

Angular 官方文档：https://angular.io/guide/observables

教程：https://appdividend.com/2018/12/08/angular-7-observables-tutorial-with-example/

另一个教程：https://codecraft.tv/courses/angular/http/http-with-observables/