Question

我已经做了很多尝试来创建Angular 7服务，该服务将从Firestore返回一个可观察到的东西，但是最新版本不返回任何数据（到目前为止最好的结果）。我之所以使用Angularfire2，是因为它是为可观察的对象而设计的，并且更易于使用。

我的服务是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);
    });
  }

我认为您需要从Observable到RxJS的基础知识

官方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/

如何订阅服务中可观察到的Firestore。角度7

1 个答案: