可觀察到的Angular和Cloud Firestore無法完成

Question

我想顯示一條消息或隱藏可觀察對象完成時的微調框，但我想Firestore可觀察對象是無止境的。 換句話說，據我了解，這很“熱”。 Spinner在下面的代碼中無止境地工作。 所以;

1. 是否沒有辦法了解Firestore可觀察性是否已完成？

2. 如果我嘗試在響應（數據）部分中隱藏微調框，則它可以按我的要求完整顯示。 這是正確的方法嗎？

3. 我不得不取消訂閱ngOnDestroy的觀察。 也是因為熱能觀察到嗎？ 我以前從未使用過退訂。 ：/

這是我的服務和頁面：

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

您所有的理解都是正確的。

1. 是否沒有辦法了解Firestore可觀察性是否已完成？

   firestore Observable是基於事件的Observable，如果您的數據庫中發生了某些更改，它始終保持活動狀態以進行偵聽。 （您希望它像這樣）。 因此，它不會自行完成，除非您強制執行，例如使用take（） ， takeUntil（）等運算符。

2. 如果我嘗試在響應（數據）部分中隱藏微調框，則它可以按我的要求完整顯示。 這是正確的方法嗎？

   是的，這是正確的，在“成功”和“錯誤”回調中都應這樣做。

3. 我不得不取消訂閱ngOnDestroy的觀察。 也是因為熱能觀察到嗎？ 我以前從未用過退訂

   是的，這是正確的方法，因為Observable不會自動完成，如果不取消訂閱，則每次退出並進入組件時都將創建多個訂閱。