Блог

Я предпринял много попыток создать службу Angular 7, которая будет возвращать observable из Firestore, но последняя версия не возвращает данных (лучший результат на данный момент); Я использовал 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);
  }
  

Это возвращает таблицы []

Все руководства, которые я нашел, возвращают наблюдаемые из констант в одном компоненте. Я пытался разобраться с этим в течение нескольких недель, поэтому, пожалуйста, помогите мне.

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 /