Angular & Cloud Firestore Observable 未完成

Question

我想在 observable 完成时显示消息或隐藏微调器，但我猜 Firestore observable 是无穷无尽的。换句话说，据我所知，它是 "hot" 。 Spinner 在下面的代码中无休止地工作。所以;

没有办法知道 Firestore observable 是否完成了吗？
如果我尝试在响应（数据）部分隐藏微调器，它会完全按我想要的方式工作。这是正确的方法吗？
我不得不使用 ngOnDestroy 取消订阅 observable。也是因为 hot 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();
  }
}

Answer 1

你的理解是正确的。

难道没有办法知道 Firestore observable 是否完成了吗？

firestore Observable 是一个基于事件的 Observable，它始终保持活动状态以监听您的数据库中是否发生了某些变化。（你希望它是这样的）。因此，它不会自行完成，除非您强制执行它，例如使用 take(), takeUntil() 等运算符。
如果我尝试在响应（数据）部分隐藏微调器，它会完全按我想要的方式工作。这是正确的方法吗？

是的，没错，在 "success" 和 "error" 回调中都这样做。
我不得不使用 ngOnDestroy 取消订阅 observable。也是因为 hot observable 吗？我以前从未使用过取消订阅

是的，这是正确的方法，因为 Observable 不会自动完成，如果您不取消订阅，您将在每次退出和进入组件时创建多个订阅。

Angular & Cloud Firestore Observable 未完成

Angular & Cloud Firestore Observable Does Not Complete

observable

firebase

angular

ionic4

google-cloud-firestore