Angular5无法获取Firebase对象，寻求技术解决方案

你遇到的问题核心在于AngularFireDatabase的list()方法返回的是Observable对象，而非直接的数据——Firebase的数据获取是异步操作，Observable需要被订阅后才会发起请求并返回实际数据。直接打印Observable只能看到它的实例，看不到你想要的Firebase对象内容。

修复步骤 #

1. 订阅Observable获取数据 #

你需要通过subscribe()方法来订阅这个Observable，才能拿到实际的列表数据。推荐在ngOnInit生命周期钩子中处理这类数据请求（而非constructor，constructor更适合依赖注入初始化），同时记得在组件销毁时取消订阅，避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {
  private oauthSubscription!: Subscription;

  constructor(private db: AngularFireDatabase) { }

  ngOnInit(): void {
    // 订阅Observable获取数据
    this.oauthSubscription = this.db.list('OAuth').valueChanges().subscribe((items) => {
      console.log("获取到的Firebase数据：", items);
      // 这里可以对数据进行后续处理
    }, (error) => {
      console.error("获取数据失败：", error);
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    if (this.oauthSubscription) {
      this.oauthSubscription.unsubscribe();
    }
  }
}

注意：valueChanges()会返回数据的纯JSON格式，如果你需要包含Firebase的key信息，可以用snapshotChanges()替代，它会返回包含key和value的快照对象。

2. 可选：使用Async管道（模板端处理） #

如果你想在模板中直接展示数据，可以用Angular的async管道，它会自动帮你订阅和取消订阅Observable，无需手动处理：

组件类中定义Observable：

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  oauthItems$!: Observable<any[]>;

  constructor(private db: AngularFireDatabase) {
    this.oauthItems$ = this.db.list('OAuth').valueChanges();
  }
}

模板中使用Async管道：

<ul>
  <li *ngFor="let item of oauthItems$ | async">{{ item | json }}</li>
</ul>

为什么原代码看不到数据？ #

db.list('OAuth')返回的是一个Observable，它是懒加载的——只有当你调用subscribe()（或者用async管道间接订阅）时，AngularFire才会向Firebase发起请求获取数据。直接打印Observable实例，只会输出它的内部结构，不会包含实际的Firebase数据。

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