Question

我在这里有点不知所措。我正在尝试学习angular cli + firebase2（使用angularfire2 5.0.0-rc.6），并且我在从我的云端防火墙数据库读取值时遇到问题。

我已经学过几个教程，并且通过文档和所有可以告诉它应该工作的措施进行挖掘。

我的环境＆gt; enviroment.ts文件如下（精确的api字符串已编辑，但直接从控制台网络值复制）。

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服务运行角度站点的捆绑版本（使用＆＃34; ng build＆＃34;以及＆＃34; ng build -prod＆＃34;）构建。当它没有工作时，我试图在firebase上托管构建的角度站点。所有这些都得到了相同的反应，我在控制台中什么也得不到（过去的＃34;我是可见的＆＃34;我记录以证明我正在寻找正确的位置），然后过了一段时间（+5分钟），偶尔，我得到一个带有以下控制台消息的空数组：

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

当我无法从集合中检索数据时，我试图将数据推送到集合（此时任何操作都会这样做）所以我删除了我的数据库并试图使用以下内容（在slide-show.component中插入第29行） .TS）

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，错误消失了。也许这个错误是愚蠢的，我留下这个评论以防万一有人需要解决方案。

Angularfire2 Firestore不从firebase

2 个答案: