[英]Angularfire2 Firestore not pulling data from firebase
我在这里有点不知所措。 我正在尝试学习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控制台从未显示添加内容。
我很茫然,如果你需要,我可以随时询问更多信息。
我现在感觉自己像个白痴,但是在深入研究这个问题后,我启用了chrome中的XML请求记录并开始观察实际的RXJS查询,并注意到请求的连续失败。 考虑到这很奇怪,我检查了我的添加阻止程序(这个碰巧是tunnlebear的阻止程序)并发现它阻止了localhost。 添加它作为例外后,我不再遇到与firebase firestore通信的问题。
问题是广告拦截器。
在我的控制台中出现此错误,正在处理角度项目:@ firebase / firestore:Firestore(5.0.2):无法访问Firestore后端。
所以我从实时数据库迁移到Cloud Firestore,错误消失了。 也许这个错误是愚蠢的,我留下这个评论以防万一有人需要一个解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.