Firebase Cloud Firestore 无法加载数据。

Question

当我打开网页时，数据会被显示出来，但当我改变组件并回到该组件时，该组件的数据不会被显示。它会显示"无项目"。我检查了日志，但没有运行到ngOnIt。ngOnIt在Web启动或Web重新加载时运行。

这是stock.service.ts文件。

import { Injectable } from '@angular/core';

import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
import { Stock } from './stock.model';

@Injectable()
export class StockService {

  stocksCollection: AngularFirestoreCollection<Stock>;
  stocks: Observable<Stock[]>;

  constructor(public afs: AngularFirestore) {
    this.stocks = this.afs.collection('stocks').valueChanges();
  }
  getStock(){
    return this.stocks;
  }
}

stock.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute,Params } from '@angular/router';

import { StockService } from '../shared/stock.service';
import { Stock } from '../shared/stock.model';
import { Brands } from '../shared/brand';

import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {

  stocks: Stock[];
  brand: Brands;
  sub: Subscription;
  brand_name: string;

  constructor(
    private stockService: StockService,
    private router: ActivatedRoute
  ) { }

  ngOnInit() {
    this.stockService.getStock().subscribe(stocks => {
      console.log(stocks);
      this.stocks = stocks;
    });

    this.sub = this.router.params.subscribe(params =>{
      this.brand_name = params['brand'];
    });

    console.log('Brand : '+this.brand_name);
  }

}

以及 stock.component.html

<div *ngIf="stocks != null || stocks?.length > 0 ; else noStocks" >
  <ul *ngFor="let item of stocks" class="collection">
    <li class="collection-item " >{{item.name}} | {{item.brand}} | {{item.price}}</li>
  </ul>
</div>

<ng-template #noStocks>
  <p>no item</p>
</ng-template>

我不知道代码哪里出错了。谢谢您的回答。

- midtonight

Answer 1

不要在服务构造函数中加载，将其移动到方法内部。

  constructor(public afs: AngularFirestore) {

  }
  getStock(){
    this.stocks = this.afs.collection('stocks').valueChanges();
    return this.stocks;
  }

- Sajeetharan

---

谢谢您！但是能否解释为什么这种情况会发生，而不是在 Firebase 的实时数据库上？ - Justine M.