Angular应用使用AngularFire2获取Firebase的FareDetails数据失败求助

看你目前的服务代码，只定义了FareList但还没完成初始化和数据获取的逻辑，这大概率是核心问题之一。我来一步步帮你梳理排查方向和解决方案：

1. 完善FareService的数据操作逻辑 #

首先要在服务里补充初始化代码和数据获取方法，确保正确关联到Firebase数据库的目标节点：

import { Injectable } from '@angular/core';
import {AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import {Fare} from './fare.model';

@Injectable()
export class FareService {
  FareList: AngularFireList<Fare>; // 指定泛型为Fare，让类型更安全

  constructor(private firebase: AngularFireDatabase) {
    // 初始化FareList，指向Firebase中存储FareDetails的节点（比如'/fare-details'，根据你的实际节点名调整）
    this.FareList = this.firebase.list('/fare-details');
  }

  // 获取所有Fare数据的公共方法
  getFares(): AngularFireList<Fare> {
    return this.FareList;
  }

  // 如果需要获取单条指定ID的Fare数据，可添加这个方法
  getFareById(id: string) {
    return this.firebase.object(`/fare-details/${id}`);
  }
}

2. 确认Firebase配置与模块导入正确 #

检查app.module.ts里是否正确导入并初始化了AngularFire相关模块，同时注册了FareService：

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { FareService } from './fare.service';

// 替换成你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID"
};

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],
  providers: [FareService] // 确保服务已注册到模块中
})
export class AppModule { }

3. 在组件中正确订阅数据 #

在需要展示数据的组件里，注入服务并通过订阅获取实时数据：

import { Component, OnInit } from '@angular/core';
import { FareService } from './fare.service';
import { Fare } from './fare.model';

@Component({
  selector: 'app-fare-display',
  templateUrl: './fare-display.component.html'
})
export class FareDisplayComponent implements OnInit {
  fareList: Fare[] = [];

  constructor(private fareService: FareService) { }

  ngOnInit() {
    // 订阅valueChanges()获取实时数据，同时捕获错误便于排查
    this.fareService.getFares().valueChanges().subscribe(
      (data: Fare[]) => {
        this.fareList = data;
        console.log('获取到的Fare数据:', this.fareList); // 打印日志确认数据是否加载
      },
      (error) => {
        console.error('数据获取失败:', error); // 输出错误信息定位问题
      }
    );
  }
}

4. 检查Firebase数据库规则 #

如果以上步骤都没问题但仍拿不到数据，很可能是数据库规则限制了访问。默认规则只允许认证用户读写，开发阶段可以临时放开（上线前务必改回安全规则）：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

5. 确保Fare模型与Firebase数据结构匹配 #

你的Fare类字段必须和Firebase中FareDetails节点的字段完全对应，比如：

export class Fare {
  $key?: string; // AngularFire会自动添加这个字段，可选
  fareCode: string;
  basePrice: number;
  description: string;
  // 其他和Firebase数据对应的字段
}

如果字段名不匹配，数据会无法正确映射，看起来就像没获取到数据。

按照这些步骤排查，应该能解决你当前的问题。如果还有异常，可以把控制台的报错信息、Firebase数据结构或者组件模板代码贴出来，方便进一步定位。

内容的提问来源于stack exchange，提问作者Sagar Timalsina