Angular4中从Firebase获取数据后无法查看数据的问题

嘿，我懂你现在的困惑——你打印的this.brandsList其实是AngularFire提供的可观察对象（Observable），不是直接的数据集，所以控制台里看不到实际的品牌数据。要拿到数据，你得订阅这个可观察对象才行，下面给你两种常用的方案：

1. 直接获取纯数据（适合仅需内容的场景） #

用valueChanges()方法订阅，它会返回Firebase节点下的纯数据数组：

// 先在组件里定义变量存储数据
brands: any[] = [];

constructor(private _router: Router, private _af: AngularFireDatabase) { 
  this.brandsList = this._af.list('/all-brands');
  // 订阅可观察对象获取实时数据
  this.brandsList.valueChanges().subscribe(brandsData => {
    this.brands = brandsData;
    console.log('实际品牌数据：', this.brands);
  });
}

2. 获取带节点Key的数据（适合需要操作节点的场景） #

如果你需要每个品牌节点的Firebase Key（比如要做删除、更新操作），就用snapshotChanges()，它会返回包含节点快照的数组，我们可以从中提取Key和数据：

brands: any[] = [];

constructor(private _router: Router, private _af: AngularFireDatabase) { 
  this.brandsList = this._af.list('/all-brands');
  this.brandsList.snapshotChanges().subscribe(changes => {
    this.brands = changes.map(change => {
      // 把Key和数据合并成一个对象
      return {
        key: change.payload.key,
        ...change.payload.val()
      };
    });
    console.log('带Key的品牌数据：', this.brands);
  });
}

3. 在模板里遍历展示数据 #

拿到数据后，就可以用Angular的*ngFor指令在模板里遍历展示了：

<!-- 示例：展示带Key的品牌数据 -->
<div *ngFor="let brand of brands">
  品牌ID：{{ brand.key }}，品牌名称：{{ brand.name }}
</div>

小提醒：避免内存泄漏 #

为了防止组件销毁后订阅仍存在导致内存泄漏，最好在组件销毁时取消订阅：

import { Subscription } from 'rxjs';

// 定义一个订阅对象
private brandsSub: Subscription;

ngOnInit() {
  this.brandsList = this._af.list('/all-brands');
  this.brandsSub = this.brandsList.valueChanges().subscribe(brandsData => {
    this.brands = brandsData;
  });
}

ngOnDestroy() {
  // 组件销毁时取消订阅
  this.brandsSub.unsubscribe();
}

这样你就能正常获取并遍历Firebase里的品牌数据啦！

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