firebase 在执行其余代码之前,要先解析函数,

xzv2uavs  于 2022-11-17  发布在  其他
关注(0)|答案(1)|浏览(120)

我正在尝试使用此服务getTodaysRoute()中,我使用.equalTo计算出了今天的路由节点键,根据我的理解,我必须使用.on函数快照,然后我可以最终从中获得键,之后我使用此键获得数据作为可观察值。问题发生在.on函数中的代码最后执行,第一次页面加载时,我的今天的路由键未定义。我怎样才能避免这种情况呢?

getTodaysRoute(): Observable<Location[]> {
    const date = new Date().toISOString().replace(/\T.*/, '');
    const userdate = `${this.useremail}${date}`;
    let todaysroutekey;
     this.db.database 
      .ref()
      .child('routes')
      .orderByChild('user_date')
      .equalTo(userdate)
      .on('child_added', function ( snapshot) {
       
        todaysroutekey =  snapshot.key;

      });
     
    console.log(todaysroutekey);
    return this.db
      .list(`${this.routesUrl}/${todaysroutekey}/locations`)
      .snapshotChanges()
      .pipe(
        map((locations) =>
          locations.map(
            (location) =>
              ({
                key: location.payload.key,
                ...(location.payload.val() as {}),
              } as unknown as Location)
          )
        )
      );
  }

这是我的组件代码

routeLocations: any[];

  constructor(private firebase: FirebaseService) { }

  ngOnInit(): void {
    this.firebase.getTodaysRoute().subscribe((value) => {
      this.routeLocations = value;
    });
  }
n8ghc7c1

n8ghc7c11#

这是预期的行为,因为on(与大多数现代云API一样)是异步操作。
处理此问题的一种方法是将第二个查询嵌套在第一个查询的on回调中:

const date = new Date().toISOString().replace(/\T.*/, '');
const userdate = `${this.useremail}${date}`;
let todaysroutekey;
 this.db.database 
  .ref()
  .child('routes')
  .orderByChild('user_date')
  .equalTo(userdate)
  .on('child_added', function ( snapshot) {       
    todaysroutekey =  snapshot.key;

    console.log(todaysroutekey);

    return this.db
      .list(`${this.routesUrl}/${todaysroutekey}/locations`)
      .snapshotChanges()
      .pipe(
        map((locations) =>
          locations.map(
            (location) =>
              ({
                key: location.payload.key,
                ...(location.payload.val() as {}),
              } as unknown as Location)
          )
        )
      );
  });

在这种情况下,你将无法返回Observable。我建议使用once(而不是on),并为此检查async/await

相关问题