[英]Angular - Error while Fetching data from Firebase
The task of this app is to get data from firebase database and show it on the console. 该应用程序的任务是从Firebase数据库获取数据并将其显示在控制台上。
I am trying to fetch data from Firebase database but getting error in Console. 我正在尝试从Firebase数据库获取数据,但在控制台中出现错误。 I have used an external library called angularFire2.
我使用了一个名为angularFire2的外部库。
This is app.module.ts file: 这是app.module.ts文件:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes} from "@angular/router";
import { HttpModule } from '@angular/http';
//AngularFire Imports
import { AngularFireModule} from 'angularfire2';
import { AngularFireDatabase} from 'angularfire2/database';
import { AngularFireAuth } from "angularfire2/auth";
//Component Imports
import { AppComponent } from './app.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ClientsComponent } from './components/clients/clients.component';
import { ClientDetailsComponent } from './components/client-details/client-details.component';
import { AddClientComponent } from './components/add-client/add-client.component';
import { EditClientComponent } from './components/edit-client/edit-client.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { SettingsComponent } from './components/settings/settings.component';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
//Service Imports
import { ClientService} from './services/client.service'
const appRoutes: Routes = [
{path:'', component: DashboardComponent},
{path:'register', component: RegisterComponent},
{path: 'login', component: LoginComponent}
];
export const firebaseConfig = {
apiKey: "AIzaSyBMDX4P41-HpeupjjNgBYY2SeE1IA6I",
authDomain: "clientpanel-7fc90.firebaseapp.com",
databaseURL: "https://clientpanel-7fc90.firebaseio.com",
storageBucket: "clientpanel-790.appspot.com",
messagingSenderId: "175372806702"
}
@NgModule({
declarations: [
AppComponent,
DashboardComponent,
ClientsComponent,
ClientDetailsComponent,
AddClientComponent,
EditClientComponent,
NavbarComponent,
SidebarComponent,
LoginComponent,
RegisterComponent,
SettingsComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(firebaseConfig)
],
providers: [
AngularFireAuth,
AngularFireDatabase,
ClientService
],
bootstrap: [AppComponent]
})
export class AppModule { }
client.service.ts file. client.service.ts文件。
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database-deprecated';
import { Observable } from 'rxjs';
import { Client } from '../models/Client';
@Injectable()
export class ClientService {
clients: FirebaseListObservable<any[]>;
client: FirebaseObjectObservable<any>;
constructor(
public af:AngularFireDatabase
) {
this.clients = this.af.list('/clients') as FirebaseListObservable<Client[]>;
}
getClients(){
return this.clients;
}
}
clients.component.ts file client.component.ts文件
import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';
import { Observable } from 'rxjs';
@Component({
selector: 'app-clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
clients:Client[];
constructor(
public clientService:ClientService
) { }
ngOnInit() {
this.clientService.getClients().subscribe(clients => {
this.clients = clients;
console.log(this.clients);
});
}
}
It looks like you've missed adding the service provided for AngularFireDatabase In app.module.ts, due to which angular isn't able to find the service. 您似乎错过了在app.module.ts中添加为AngularFireDatabase提供的服务的步骤,由于这个原因,angular无法找到该服务。 Can you please share your app.module.ts file?
您可以分享您的app.module.ts文件吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.