AngularFire2 5.0.0-rc.8数据获取后无法显示问题求助

嘿，我来帮你搞定这个问题！你遇到的情况确实有点奇怪——Chrome网络面板能看到拿到了数据，但控制台没输出，弹窗“Hello”正常弹出，“Inside”弹窗却没反应，咱们一步步排查解决：

我的代码片段 #

app.module.ts #

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database'

const firebaseConfig = { 
  apiKey: "AIzaSyClxpBtKaVlcr5n-itSoZM_WWTLBqVf-og", 
  authDomain: "ionic-abs-conference.firebaseapp.com", 
  databaseURL: "https://ionic-abs-conference.firebaseio.com", 
  projectId: "ionic-abs-conference", 
  storageBucket: "ionic-abs-conference.appspot.com", 
  messagingSenderId: "668567626055" 
};

// imports数组配置
@NgModule({
  imports: [
    // ...其他模块
    AngularFireModule.initializeApp(firebaseConfig), 
    AngularFireDatabaseModule,
  ]
})
export class AppModule {}

schedule.ts #

import { AngularFireDatabase } from 'angularfire2/database'

export class SchedulePage {
  constructor(public angFire: AngularFireDatabase) {}

  ionViewDidLoad() {
    this.getDataFire();
  }

  getDataFire() { 
    alert("Hello"); 
    this.angFire.list('/speakers/0/').valueChanges().subscribe( 
      data=> { 
        // this.arrData= data; 
        alert("Inside"); 
        console.log(JSON.stringify(data)) 
      }, 
      (err) => { 
        console.log(err); 
      } 
    ) 
  }
}

排查与解决方案 #

结合你的场景，我整理了几个最可能的原因和对应解决办法：

• 路径类型不匹配：用错了list()和object()
  你订阅的路径是/speakers/0/，如果这个节点是单个对象（不是多个子节点组成的列表），list()方法会无法正确触发回调——因为list()是用来监听子节点集合的，单个对象应该用object()。试试改成：

  this.angFire.object('/speakers/0/').valueChanges().subscribe(...)
  

• 订阅被意外回收：保留订阅引用
  有时候RxJS的订阅会被垃圾回收机制意外清理，导致回调不触发。你可以在组件中保留订阅的引用，并在组件销毁时手动取消订阅：

  import { Subscription } from 'rxjs';
  
  export class SchedulePage {
    private dataSubscription: Subscription;
  
    getDataFire() { 
      alert("Hello"); 
      this.dataSubscription = this.angFire.list('/speakers/0/').valueChanges().subscribe( 
        // ...你的回调逻辑
      ) 
    }
  
    // 组件销毁时取消订阅
    ngOnDestroy() {
      if(this.dataSubscription) this.dataSubscription.unsubscribe();
    }
  }
  

• Firebase规则权限问题
  虽然网络面板看到了数据，可能是浏览器缓存的旧数据？去Firebase控制台的Realtime Database规则里检查，确保当前用户有权限读取该路径。开发环境可以临时设置为开放规则测试（上线后一定要改回安全规则）：

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

• 添加调试操作符排查数据流
  可以用RxJS的tap()和catchError()操作符，更精准地排查数据流是否正常：

  import { tap, catchError } from 'rxjs/operators';
  import { of } from 'rxjs';
  
  getDataFire() { 
    alert("Hello"); 
    this.angFire.list('/speakers/0/').valueChanges().pipe(
      tap(data => console.log('数据流触发:', data)),
      catchError(err => {
        console.error('捕获到错误:', err);
        return of(null);
      })
    ).subscribe( 
      data=> { 
        alert("Inside"); 
        console.log(JSON.stringify(data)) 
      }
    ) 
  }
  

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