Получить данные из Firebase, используя angularfire2 (пример документа) - PullRequest
Новая
       13

Получить данные из Firebase, используя angularfire2 (пример документа)

0 голосов
/ 21 мая 2018

Я пытаюсь получить базу данных из Firebase .Я прошел этот урок .После того, как я запустил ng serve, ничего не произошло, и у меня появилась эта ошибка в консоли:

[2018-05-21T12: 25: 48.364Z] @ firebase / firestore: Firestore (5.0.3):Не удалось связаться с бэкэндом Firestore.

environment.ts : 

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyCip0O3rjU6AXHUKZg7Z26hpLZThTfStsA",
    authDomain: "clientpanel-c4a89.firebaseapp.com",
    databaseURL: "https://clientpanel-c4a89.firebaseio.com",
    projectId: "clientpanel-c4a89",
    storageBucket: "clientpanel-c4a89.appspot.com",
    messagingSenderId: "894070096713"
  }
};

app.module.ts : 

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

// FIREBASE / ANGULARFIER2
import { environment } from '../environments/environment';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { AngularFireAuthModule } from 'angularfire2/auth';

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts : 

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  items: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items = db.collection('/client').valueChanges();
  }
}

app.component.html : 

<h2>The list</h2>

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.email}}
  </li>
</ul>

И, наконец,Это My Firebase

1 Ответ

0 голосов
/ 22 мая 2018

На снимке экрана показано, что вы используете базу данных реального времени firebase, но в вашем коде используется Firebase Cloud Firestore.

Измените AngularFirestore на AngularFireDatabase.

Пример работы сваша база данных: https://stackblitz.com/edit/so002

-OR-

Переместите ваши данные в облачное хранилище

...