Question

我有这段代码：

import {Component, OnInit} from '@angular/core';
import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated';
import {Item} from '../shared/item';
import {ItemService} from '../shared/item.service';

@Component({
  selector: 'app-items-list',
  templateUrl: './items-list.component.html',
  styleUrls: ['./items-list.component.scss']
})
export class ItemsListComponent implements OnInit {

  public items: FirebaseListObservable<any[]>;

  constructor(private itemSvc: ItemService) {
  }

  ngOnInit() {
    this.items = this.itemSvc.getItemsList({limitToLast: 10});
  }

  deleteItems() {
    this.itemSvc.deleteAll();
  }
}

当我尝试运行它时，我得到了很棒且有用的ERROR Error: "[object Object]"。我正在评论，直到错误消失。看起来我的构造函数有问题，但我不知道是什么。有什么想法吗？

这是我的ItemService：

import {Injectable} from '@angular/core';
import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated';
import {Item} from './item';

@Injectable()
export class ItemService {

  private basePath: string = '/items';

  items: FirebaseListObservable<Item[]> = null; //  list of objects
  item: FirebaseObjectObservable<Item> = null; //   single object

  constructor(private db: AngularFireDatabase) {
  }

  getItemsList(query = {}): FirebaseListObservable<any[]> {
    this.items = this.db.list(this.basePath, {
      query: query
    });
    return this.items;
  }

  // Return a single observable item
  getItem(key: string): FirebaseObjectObservable<Item> {
    const itemPath = `${this.basePath}/${key}`;
    this.item = this.db.object(itemPath);
    return this.item;
  }

  createItem(item: Item): void {
    this.items.push(item)
      // .catch(error => this.handleError(error));
  }


  // Update an existing item
  updateItem(key: string, value: any): void {
    this.items.update(key, value)
      .catch(error => this.handleError(error));
  }

  // Deletes a single item
  deleteItem(key: string): void {
    this.items.remove(key)
      .catch(error => this.handleError(error));
  }

  // Deletes the entire list of items
  deleteAll(): void {
    this.items.remove()
      .catch(error => this.handleError(error));
  }

  // Default error handling for all actions
  private handleError(error) {
    console.log(error);
  }
}

HTML模板：

<div *ngFor="let item of items | async" >
  <app-item-detail [item]='item'></app-item-detail>
</div>
<!--<button (click)='deleteItems()'>Delete Entire List</button>-->

app.module.ts档案：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {rootRouterConfig} from './app.routes';
import {AngularFireModule} from 'angularfire2';
import {AngularFirestoreModule} from 'angularfire2/firestore';
import {AngularFireAuthModule} from 'angularfire2/auth';
import {environment} from '../environments/environment';
import {LoginComponent} from './login/login.component';
import {UserComponent} from './user/user.component';
import {RegisterComponent} from './register/register.component';
import {UserResolver} from './user/user.resolver';
import {AuthGuard} from './core/auth.guard';
import {AuthService} from './core/auth.service';
import {UserService} from './core/user.service';
import {ReactiveFormsModule} from '@angular/forms';

import {AppComponent} from './app.component';
import {HomeComponent} from './home/home.component';
import {AboutComponent} from './about/about.component';
import {ItemsListComponent} from './items/items-list/items-list.component';
import {ItemDetailComponent} from './items/item-detail/item-detail.component';
import {ItemFormexportComponent} from './items/item-formexport/item-formexport.component';
import {ItemFormComponent} from './items/item-form/item-form.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    UserComponent,
    RegisterComponent,
    HomeComponent,
    AboutComponent,
    ItemsListComponent,
    ItemDetailComponent,
    ItemFormexportComponent,
    ItemFormComponent,
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot(rootRouterConfig, {useHash: false}),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features
  ],
  providers: [AuthService, UserService, UserResolver, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule {
}

我是Angular的新手，所以如果我错过了什么请告诉我，我会加上它。

Answer 1

确保在app.module.ts文件中导入AngularFireDatabaseModule。由于您的服务使用的是AngularFireDatabase。

有关详细信息，请参阅以下链接。 https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md

import { AngularFireModule } from 'angularfire2';
// for AngularFireDatabase
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
// for AngularFireAuth
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireAuth } from 'angularfire2/auth';

@NgModule({
  imports: [
    AngularFireModule.initializeApp({         <---- main module
      apiKey: ...,
      authDomain: '...',
      databaseURL: '...',
      storageBucket: '...',
      messagingSenderId: '...'
    }),                                       
    AngularFireDatabaseModule,                <---- for database 
    AngularFireAuthModule                     <---- for auth
  ]
})

在将值传递给它时让构造函数工作的问题

1 个答案: