我想在 observable 完成时显示一条消息或隐藏微调器,但我猜 Firestore observable 是无穷无尽的。换句话说,正如我所理解的,它是“热”的。 Spinner 在下面的代码中无限工作。所以;
是否有办法了解 Firestore observable 是否已完成?
如果我尝试在响应(数据)部分隐藏微调器,它会完全按照我想要的方式工作。这是正确的方法吗?
我必须使用 ngOnDestroy 取消订阅 observable。也是因为热观察吗?我以前从未使用过取消订阅。 :/
这是我的服务和页面:
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Dining } from '../_models/dining';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DiningService {
now = new Date();
yesterday = new Date(this.now.getTime() - 1000 * 60 * 60 * 24 * 1);
constructor(public db: AngularFirestore) {}
getDining() {
return this.db
.collection<Dining>('Dining', ref => ref.where('date', '>', this.yesterday))
.valueChanges();
}
}
import { Component, OnInit, OnDestroy } from '@angular/core';
import { DiningService } from 'src/app/_services/dining.service';
import { Dining } from '../../_models/dining';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-dining',
templateUrl: './dining.page.html',
styleUrls: ['./dining.page.scss']
})
export class DiningPage implements OnInit, OnDestroy {
list: Dining[] = [];
msg: string;
msgColor = '';
subscription: Subscription;
showSpinner = true;
constructor(private diningService: DiningService) {}
ngOnInit() {
this.getDining();
}
getDining() {
this.subscription = this.diningService.getDining().subscribe(
res => {
this.list = res;
this.msg = this.list.length === 0 ? 'ERROR_DATA' : '';
this.msgColor = this.list.length === 0 ? 'danger' : '';
// this.showSpinner = false;
},
err => {
console.error('Oops:', err.message);
this.msg = 'ERROR_COM';
// this.showSpinner = false;
},
() => {
this.showSpinner = false;
}
);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
最佳答案
您的所有理解都是正确的。
有没有办法了解 Firestore observable 是否已完成?
firestore Observable 是一个基于事件的 Observable,它始终保持事件状态以监听数据库中的某些更改。 (你希望它是这样的)。因此,它不会自行完成,除非您强制它,例如使用 take() , takeUntil()等运算符。
如果我尝试在响应(数据)部分隐藏微调器,它会完全按照我想要的方式工作。这是正确的方法吗?
是的,这是正确的,在“成功”和“错误”回调中都执行此操作。
我必须使用 ngOnDestroy 取消订阅 observable。也是因为热观察吗?我以前从未使用过取消订阅
是的,这是正确的方法,因为 Observable 不会自动完成,如果您不取消订阅,您每次退出并进入组件时都会创建多个订阅。
关于Angular 和 Cloud Firestore Observable 未完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54091265/