您好,我是 Angular 和 Firebase 的新手,试图连接我的 Angular 应用程序以获取实时数据更新,我从这个 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() {
}
}
我正在从 firebase 获取初始数据,但它没有连接套接字来获取实时数据。
最佳答案
doc().get() 返回一个 promise ,而不是一个流(Observable)。有了 promise ,如果您的目标是只获取一次数据,您就可以利用这一优势。为了首先获取数据并监听变化,您需要使用 doc().onSnapshot() method .
顺便提一下,我建议尝试 Angular's @angular/fire package (Angular/AngularFire2) 用于 Angular + Firebase 开发,因为已经有很多官方文档、具体支持和问题。有了它, getOrder 方法就可以简化为:
getOrder(id: string): Observable<Order> {
console.log('on get order snapshot');
return db.doc<Order>(`orders/${id}).valueChanges();
}
关于javascript - 套接字未连接到 Angular-Firebase 以获得实时更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54216040/