Гнездо не подключается на angular-firebase для получения обновления в реальном времени

Question

Здравствуйте, я новичок в angular и firebase, пытаюсь подключить мое угловое приложение для получения обновлений данных в реальном времени, я реализовал процесс по этому URL - https://www.djamware.com/post/5bbf534580aca7466989441c/angular-6-firebase-tutorial-firestore-crud-web-application, Я получаю исходные данные, когда страница загружается изФункция getOrder () службы.

в моем компоненте приложения -

import * as firebase from 'firebase';
import firestore from 'firebase/firestore';
import { environment } from '../environments/environment'; // here my configuration is

const settings = {timestampsInSnapshots: true}

ngOnInit(){
    firebase.initializeApp(environment.firebase);
    firebase.firestore().settings(settings);
}

в моем firebase.service -

ref = firebase.firestore().collection('orders');
getOrders(): Observable<any> {
      console.log('on get orders snapshot');
      return new Observable((observer) => {
        this.ref.onSnapshot((querySnapshot) => {
          let boards = [];
          querySnapshot.forEach((doc) => {
            let data = doc.data();
            observer.next({
              driver_status: data.driver_status,
              food_status: data.food_status,
            });
          });
          observer.next(boards);
        });
      });
    }

    getOrder(id: string): Observable<any> {
      return new Observable((observer) => {
        this.ref.doc('ref-'+id).get().then((doc) => {
          let data = doc.data();
          observer.next({
            driver_status: data.driver_status,
            food_status: data.food_status,
          });
        });
      });
    }

в моем компоненте детализации -

displayedColumns = ['driver_status', 'food_status'];
dataSource = new OrderDataSource(this.fs);

public fireOrder: Observable<any[]>;
ngOnInit(){
this.fs.getOrder(this.order.id).subscribe(res =>{
  this.fireOrder = res;
});
}
--------------------------
export class OrderDataSource extends DataSource<any> {

  constructor(private fs: FirebaseService) {
    super();
    console.log('in OrderDataSource constructor');
    this.connect();
  }

  connect() {
    console.log('in connect');
    return this.fs.getOrders();
  }

  disconnect() {
  }
}

Я получаю исходные данные из базы данных, но он не подключает сокет для получения данных в реальном времени.

Answer 1

doc (). Get () возвращает обещание, а не поток (Observable). С обещанием вы можете воспользоваться возможностью получить данные только один раз, если это ваша цель. Для того, чтобы сначала получить данные, а также прослушать изменения, вам нужно использовать метод doc (). OnSnapshot () .

В качестве дополнительного упоминания, я бы рекомендовал попробовать пакет Angular @ angular / fire (angular / angularfire2) для разработки Angular + Firebase, так как существует много официальной документации, специальной поддержки и вопросов уже там для этого. С его помощью можно уменьшить метод getOrder до:

getOrder(id: string): Observable<Order> {
    console.log('on get order snapshot');
    return db.doc<Order>(`orders/${id}).valueChanges();
}