Question

在我的app.component.ts中，我使用此函数使用angularFire2将用户注册到firebase。但是我收到错误的＆＃34;属性＆＃39;订阅＆＃39;类型＆＃39; void＆＃34;上不存在。

register() {
    this.userService.registerUser(this.model)
        .subscribe(
            data => {
                console.log('Registration successful')
            },
            error => {
                this.loading = false;
            });
}

在我的userService.ts中，我有以下调用从firebase获取数据

registerUser(user: User) {
    this.angularFire.auth.createUser({
    email: user.email,
    password: user.password
    }).then(
    (success) => {
        console.log(success);
    }).catch(
    (err) => {
        console.log(err);
    })
}

我明白为什么会出现错误。因为我在userService中的registerUse函数没有返回一个observable。由于我是打字稿的新手，如何将其更改为可观察的，以便在数据返回时我可以在app.component.ts中控制.log（＆＃39;成功＆＃39;）？

Answer 1

最直接的选择是返回承诺：

import { FirebaseAuthState } from 'angularfire2';

registerUser(user: User): Promise<FirebaseAuthState> {
  return this.angularFire.auth.createUser({
    email: user.email,
    password: user.password
  })
  .then((authState: FirebaseAuthState) => {
    console.log(success);
    return authState;
  })
  .catch((error) => {
    console.log(error);
    throw error;
  });
}

但是，如果要返回一个observable，可以使用fromPromise：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import { FirebaseAuthState } from 'angularfire2';

registerUser(user: User): Observable<FirebaseAuthState> {
  return Observable.fromPromise(this.angularFire.auth.createUser({
    email: user.email,
    password: user.password
  })
  .then((authState: FirebaseAuthState) => {
    console.log(success);
    return authState;
  })
  .catch((error) => {
    console.log(error);
    throw error;
  }));
}

如果您要使用catch中的registerUser来记录错误，则应重新抛出错误，以便调用者可以捕获并处理错误。如果您不需要日志记录，只需将其保留，调用者可以处理任何错误（通过observable）：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import { FirebaseAuthState } from 'angularfire2';

registerUser(user: User): Observable<FirebaseAuthState> {
  return Observable.fromPromise(this.angularFire.auth.createUser({
    email: user.email,
    password: user.password
  }));
}

如果您不想返回AngularFire2的FirebaseAuthState，您可以使用then返回其他内容作为promise的已解析值（这将是observable发出的值）。

使用Firebase和AngularFire2注册用户

1 个答案: