Ionic+Angular项目AngularFire获取Firebase数据失败及报错求助

我来帮你逐个解决这两个报错：

一、解决TypeScript报错：Cannot find type definition file for 'firebase' #

这个问题是因为你的项目缺少Firebase的TypeScript类型定义文件，AngularFire2 5.x版本依赖这个文件来做类型检查。你需要安装与当前firebase@4.4.0匹配的类型包：

在项目根目录执行以下命令：

npm install @types/firebase@4.4.0 --save-dev

指定版本号是为了避免类型定义与Firebase核心库版本不兼容的问题。

二、解决模板报错：ngFor is only for array elements #

这个报错说明stockList返回的不是数组，结合你的Firebase数据结构（带唯一键的子节点），我推测是数据获取方式的问题，以下分两种情况给出解决方案：

情况1：你的stock节点是通过push添加的列表（自动生成唯一键） #

这种情况下，你可以用snapshotChanges()来获取包含节点键和数据的数组，同时也能拿到每个节点的唯一键：

修改Firebase服务代码：

import { map } from 'rxjs/operators';

constructor(public afDB: AngularFireDatabase) { 
  console.log('Hello FireBaseServicesProvider Provider'); 
} 

getStockUserList(){ 
  return this.afDB.list('stock/').snapshotChanges().pipe(
    map(changes => 
      changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
    )
  );
}

对应的HTML模板可以同时使用键和字段：

<ul> 
  <li *ngFor="let item of stockList | async"> 
    {{ item.name }} - {{ item.age }}
  </li> 
</ul>

如果想继续用valueChanges()，可以通过idField配置把唯一键注入到返回的对象中：

getStockUserList(){ 
  return this.afDB.list('stock/', { idField: 'key' }).valueChanges(); 
}

情况2：你的stock节点是手动设置键的对象（不是通过push生成的列表） #

如果stock是一个包含自定义键的对象，需要先把对象转换成数组再返回：

修改Firebase服务代码：

import { map } from 'rxjs/operators';

getStockUserList(){ 
  return this.afDB.object('stock/').valueChanges().pipe(
    map(obj => Object.keys(obj).map(key => ({ key, ...obj[key] })))
  );
}

额外检查项 #

别忘了确认Firebase数据库的读取权限是否开放（开发环境下可以临时设置为公开读写），如果权限不足也会导致获取不到数据：

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

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