Angularfire2 Firestore沒有從firebase中提取數據

Question

我在這里有點不知所措。 我正在嘗試學習angular cli + firebase2（使用angularfire2 5.0.0-rc.6），我在從雲端firestore數據庫讀取值時遇到問題。

我已經學習了幾個教程，並通過文檔挖掘了所有可以告訴它應該工作的措施。

我的環境> enviroment.ts文件如下（精確的api字符串已編輯，但直接從控制台Web值復制）。

export const environment = {
production: false,
  firebase: {
    apiKey: 'myapikey',
    authDomain: 'mydomain',
    databaseURL: 'mydburl',
    projectId: 'myprojectid',
    storageBucket: 'mystoragebucket',
    messagingSenderId: 'mymessageid'
  }
};

我的app.module.ts如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MenubarComponent } from './menubar/menubar.component';
import { HomeComponent } from './home/home.component';
import {AppRoutingModule} from './app-routing/app-routing.module';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { HttpClientModule } from '@angular/common/http';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { SlideShowComponent } from './slide-show/slide-show.component';


@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  declarations: [AppComponent, HomeComponent, MenubarComponent, SlideShowComponent]
})
export class AppModule { }

我的組件（幻燈片放映）slide-show.component.ts如下：

import { Component, OnInit } from '@angular/core';
import {AngularFirestore, AngularFirestoreCollection} from 'angularfire2/firestore';
import {Observable} from 'rxjs/Observable';


export interface Book {
  author: string;
  bgImage: string;
  cover: string;
  featured: boolean;
  published: boolean;
  teaser: boolean;
  title: boolean;
}

@Component({
  selector: 'app-slide-show',
  templateUrl: './slide-show.component.html',
  styleUrls: ['./slide-show.component.css']
})
export class SlideShowComponent implements OnInit {
  public collection: AngularFirestoreCollection<any>;
  public booksObservable: Observable<any[]>;
  public books: any[];

  constructor( afs: AngularFirestore ) {
    this.collection = afs.collection('books');
    this.booksObservable = this.collection.valueChanges();
    console.log( 'I am visible' );
    this.booksObservable.subscribe(data => {
      console.log(data);
      this.books = data;
    });
  }

  ngOnInit() {

  }

}

我的slide-show.component.html如下：

<div class="container">
  <div class="spacer"></div>
  <div class="teaser">hello world test</div>
  <div class="menu-spacer">
    <ul>
      <li *ngFor="let item of booksObservable | async">
        {{item.author}}
      </li>
    </ul>
  </div>
  <div class="spacer"></div>
</div>

由於問題溝通，我已將firestore.rules文件更改為以下內容：

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

我的數據庫設置如下：

我的第一個想法是我正在從可觀察到的錯誤中讀取...因為幾個例子直接在HTML中的observable上迭代我也添加了...我的第二個想法是它可能是因為我在我的本地服務器上測試所以我安裝了firebase命令行工具，並嘗試使用firebase服務（使用“ng build”和“ng build -prod”構建）運行角度站點的捆綁版本。 當這不起作用時，我試圖在firebase上托管構建的角度站點。 所有這些都得到了同樣的反應，我在我的控制台中什么也得不到（過去“我是可見的”我記錄以證明我正在尋找正確的位置），然后經過一段時間（+5分鍾），偶爾，我得到一個帶有以下控制台消息的空數組：

Firestore (4.10.1) 2018-03-07T05:51:24.432Z: Could not reach Firestore backend.

當我無法從集合中檢索數據時，我試圖將數據推送到集合（此時任何操作都會這樣做）所以我刪除了我的數據庫並嘗試使用以下內容（在slide-show.component.ts中插入第29行）

this.collection.add({author: 'test1', title: 'test 1 title'});
this.collection.add({author: 'test2', title: 'test 2 title'});

這個實驗導致前端console.log打印出值，HTML打印值（感謝RXJS）但是，firebase控制台從未顯示添加內容。

我很茫然，如果你需要，我可以隨時詢問更多信息。

Answer 1

我現在感覺自己像個白痴，但是在深入研究這個問題后，我啟用了chrome中的XML請求記錄並開始觀察實際的RXJS查詢，並注意到請求的連續失敗。 考慮到這很奇怪，我檢查了我的添加阻止程序（這個碰巧是tunnlebear的阻止程序）並發現它阻止了localhost。 添加它作為例外后，我不再遇到與firebase firestore通信的問題。

問題是廣告攔截器。

Answer 2

在我的控制台中出現此錯誤，正在處理角度項目：@ firebase / firestore：Firestore（5.0.2）：無法訪問Firestore后端。

所以我從實時數據庫遷移到Cloud Firestore，錯誤消失了。 也許這個錯誤是愚蠢的，我留下這個評論以防萬一有人需要一個解決方案。