Angular 5从Firebase获取数据失败，请求排查代码问题

嗨，我来帮你梳理下当前代码的问题，以及对应的解决办法：

核心问题分析 #

从你的Firebase数据结构和报错来看，主要问题出在数据获取时没有包含节点的$key属性，同时模板中直接使用了c.$key导致属性不存在的错误：

• valueChanges()方法默认仅返回Firebase节点的数据值，不会包含节点的key（也就是你需要的$key）；
• 模板里的[value]="c.$key"尝试访问一个不存在的属性，这就是控制台报错的根源。

具体修复步骤 #

1. 修改CategoryService中的数据获取逻辑 #

根据你使用的angularfire2版本，有两种修复方式：

方式一：使用valueChanges的idField参数（推荐，适用于angularfire2 5.x+）

直接通过idField参数指定要添加的key字段名，这样返回的每个对象会自动包含$key属性：

// category.service.ts
import { Injectable } from '@angular/core'; 
import { AngularFireDatabase } from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class CategoryService { 
  constructor(private db: AngularFireDatabase) { } 

  getCategories(){ 
    // 添加idField参数，将节点key映射为$key
    return this.db.list('/categories').valueChanges({ idField: '$key' }); 
  } 
}

方式二：使用snapshotChanges()映射数据（兼容旧版本）

如果你的angularfire2版本不支持idField，可以通过snapshotChanges()获取快照，手动提取key并合并到数据中：

// category.service.ts
import { Injectable } from '@angular/core'; 
import { AngularFireDatabase } from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators'; // 导入map操作符

@Injectable() 
export class CategoryService { 
  constructor(private db: AngularFireDatabase) { } 

  getCategories(){ 
    return this.db.list('/categories').snapshotChanges()
      .pipe(
        map(changes => 
          changes.map(item => ({ 
            $key: item.payload.key, 
            ...item.payload.val() // 展开节点的其他属性（比如name）
          }))
        )
      );
  } 
}

2. 确认模板逻辑正确性 #

你的模板代码本身是正确的，使用async管道订阅Observable没问题，修复服务端的逻辑后，c.$key和c.name就能正常访问了：

<select class="form-control" name="" id="category">
  <option value=""></option>
  <option *ngFor="let c of categories$ | async" [value]="c.$key">
    {{c.name}}
  </option>
</select>

额外检查项 #

• 确保在AppModule中正确导入并配置了AngularFireModule和AngularFireDatabaseModule，比如：

// app.module.ts
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

const firebaseConfig = {
  // 你的Firebase配置信息
};

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ]
})
export class AppModule { }

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