ng不工作,Firestore

时间:2017-11-28 16:01:57

标签: google-cloud-firestore angular5

我正在尝试将Angular5与Firestore一起使用的示例,但我无法从Firestore数据库中检索任何数据。任何帮助将不胜感激,因为这是一个显示塞子。具有讽刺意味的是,我可以使用示例将新记录插入数据库,我只是无法检索任何内容。提前谢谢。

app.component.html:

<ul *ngFor="let post of posts | async">
  <li>
    <strong>{{ post.title }}</strong>
    <br>
    {{ post.content }}
  </li>
</ul>

app.component.ts:

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

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

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

interface Post {
  title: string;
  content: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  postsCollection: AngularFirestoreCollection<Post>;
  posts: Observable<Post[]>;

  constructor (private afs: AngularFirestore) {

  }

  ngOnit() {
    this.postsCollection = this.afs.collection('posts');
    this.posts = this.postsCollection.valueChanges();
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';

import { FormsModule } from '@angular/forms';

var firebaseConfig = {
  apiKey: "edited but correct",
  authDomain: "edited but correct",
  databaseURL: "edited but correct",
  projectId: "edited but correct",
  storageBucket: "",
  messagingSenderId: "edited but correct"
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2 个答案:

答案 0 :(得分:1)

看起来像是一个错字:

global.rootRequire = function(name) {
    return require(__dirname + '/' + name);
}

应该是:

 ngOnit() {

(如果它还没有准备好在生命周期中的那一点加载,你甚至可能需要ngAfterContentInit()。)

答案 1 :(得分:0)

错误在此行

SELECT
      PARSE_DATE('%Y%m%d', t.date) as Date
      ,count(distinct(FullvisitorID)) as visitor_count
      ,sum( totals.newVisits ) AS New_Visitors
      ,if(customDimensions.index=2, customDimensions.value,null)  as orig
    FROM `table` as t
      CROSS JOIN UNNEST(hits) AS hit
      CROSS JOIN UNNEST(hit.customDimensions) AS customDimensions
    WHERE
      date='20170101'

GROUP BY DATE,if(customDimensions.index=2, customDimensions.value,null) 

将其更改为:

ngOnInit() {
    this.postsCollection = this.afs.collection('posts');  <<HERE
    this.posts = this.postsCollection.valueChanges();
}

供参考,您可以阅读本页:

https://blog.angular.io/improved-querying-and-offline-data-with-angularfirestore-dab8e20a4a06