Question

我正在为我的webapp使用Angular和Firebase。我从组件类（A-component.ts）的构造函数调用服务（A-service.ts）的函数来获取用户名。

构造函数代码：

constructor(private aService: AService, private firebase: AngularFireDatabase) { 
    this.userName = aService.getUserName(firebase)[0];   }

服务代码：

var user = [];
    var query = firebase.database.ref("Users").orderByKey();
    query.once("value")
      .then(function (snapshot) {
        snapshot.forEach(function (childSnapshot) {
          var key = childSnapshot.key;
          var childData = childSnapshot.val();
          if (key = localStorage.getItem("LoggedUser")) {
            user.push(childData.Name);
          }
        });
      });
    return user;
  }

所以代码的问题是在服务方法中，query.once表现异步，因此我无法将用户正确地返回到构造函数。

任何人都可以建议解决方案吗？

Answer 1

有一个很好的rxjs包可以帮到你。看看rxjs/toPromise。

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/topromise.md

如果您将其导入service或app.module.ts文件。

import 'rxjs/add/operator/toPromise';

然后你接收了一个promise，而不是一个observable，但你仍然需要在构造函数中处理这个逻辑。

constructor

constructor(private aService: AService, private firebase: AngularFireDatabase) { 
  aService.getUserName(firebase)
    .then(user => {
      this.userName = user;
    });
}

service

return firebase.database().ref('Users')
  .orderByKey()
  .once('value')
  .toPromise()
  .then(snapshot => {
    const user = [];
    snapshot.forEach(childSnapshot => {
      const key = childSnapshot.key;
      const childData = childSnapshot.val();

      if (key = localStorage.getItem('LoggedUser')) {
        user.push(childData.Name);
      }
    });

    if (user.length > 0) {
      return user[0];
    }
  });

Answer 2

如果您希望用户名随数据库值的更改进行实时更改，您可以在html中作为observable本身显示返回。如需更多参考，请结帐Top 7 RxJS Concepts for Angular Developers。

component.html

<div>{{username | async}}</div>

component.ts

username;
constructor(private aService: AuthService) {
    this.username = aService.getUserName();
}

AuthService.ts

getUserName() {
    return firebase.database().ref('Users').val();
}

编辑：如果你想在component.ts中使用用户名值，那么用

替换构造函数

username;
subscription;
constructor(private aService: AuthService) {
    this.subscription = aService.getUserName().subscribe((user) => {
        this.username = username;
    });
}
ngOnDestroy(){
    this.subscription.unsubcribe();
}

Answer 3

最后我明白了。我将方法的返回类型更改为Promise，并将promise返回给构造函数以获取值。

感谢https://stackoverflow.com/users/1968911/sketchthat为我提供了一种方法。

AngularFirebase如何使query.once操作等到它返回值？

3 个答案: