angular6 - Angular 6 错误不会触发

问题描述

我正在学习 Angular 并且在我的示例中使用 FirebasecreateUserWithEmailAndPassword进行注册。这将返回一个我已更改为可观察使用的承诺from。

在 firebase 中，最小密码长度为 6 个字符。当我提供 5 个字符时，在控制台中我会看到错误消息，但在我的注册事件中，显示的是成功消息而不是错误。我在这里想念什么？

身份验证服务

import * as firebase from 'firebase';
import { throwError, from } from 'rxjs';

export class AuthService{

    //user sign up, its a promise so listen for errors and log 
    signUpUser(email: string, password: string){
        //return an observable using from
        return from( 
            firebase.auth().createUserWithEmailAndPassword(email, password)
            .then(
                (authData) => {
                    //good
                    console.log("User created successfully with payload-", authData);
                    return authData;
                }
            )
            .catch(
                (error) => {
                    //error 
                    console.log(error); 
                    return throwError(error);;
                }
            )
        );
    }
}

注册组件

  onSignup(form: NgForm){
    const email = form.value.email;
    const password = form.value.password;
    this.authService.signUpUser(email, password).subscribe(
      (authData) => {
        alert("Signup successful");
        this.router.navigate(['/sign-in']);
      },
      (error) => {
        alert(error.message);
      }
    );
  }

我then也在 authService 方法中使用。我该怎么办.pipe(map(return authData.json()))？

更新1：

以下帮助，我得到了我的错误，在成功注册后，我被重定向到登录视图。

将 promise 转换为 observable

身份验证服务

import { from  } from 'rxjs';

    signUpUserNew(email: string, password: string){
        var subscription = from(firebase.auth().createUserWithEmailAndPassword(email, password));
        return subscription;
    }

注册组件

//property to hold result of sign-up error
  error = '';

  onSignup(form: NgForm){
    const email = form.value.email;
    const password = form.value.password;
    //this.authService.signUpUser(email, password);
    this.authService.signUpUserNew(email, password)
    .subscribe(
      (firebaseUser) => {
        console.log(firebaseUser);
        this.router.navigate(['/sign-in']);
      },
      (error) => {
        this.error = error.message;
      }
    );

  }

看法

<h2>Register</h2>
<div class="row">
  <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
    <form (ngSubmit)="onSignup(f)" #f="ngForm">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" ngModel class="form-control" #email="ngModel" required email>
        <span class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email!</span>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" ngModel class="form-control" #password="ngModel" required minlength="6"> 
        <span class="help-block" *ngIf="!password.valid && password.touched && !password.errors?.minlength">Please enter a valid password!</span>
        <span class="help-block" *ngIf="!password.valid && password.touched && password.errors?.minlength">Password must be at least 6 characters long</span>
      </div>
      <p class="error" *ngIf="error">{{ error }}</p>
      <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Sign Up</button>
    </form>
  </div>
</div>

结果

待办的

现在我仍然需要帮助实现管道和地图操作员。

我在 .json 上收到以下错误：

[ts] Property 'json' does not exists on type 'UserCredential'

  onSignup(form: NgForm){
    const email = form.value.email;
    const password = form.value.password;
    //this.authService.signUpUser(email, password);
    this.authService.signUpUserNew(email, password)
    .pipe(
      map(
        (firebaseUser) => {
          return firebaseUser.json();
        }
      )  
    )
    .subscribe(
      (firebaseUser) => {
        console.log(firebaseUser);
        this.router.navigate(['/sign-in']);
      },
      (error) => {
        this.error = error.message;
      }
    );

  }

标签： angular6

首先，我想你应该调用fromPromise而不是from，所以尝试以下操作：

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

signUpUser(email: string, password: string){
    //return an observable using fromPromise
    const obs$ = fromPromise( 
        firebase.auth().createUserWithEmailAndPassword(email, password)
    );

    // you can call .pipe() here, and it will return an observable
    return obs$.pipe(
       map(x => console.log('PUT YOUR MAP FUNCTION HERE.')),
       filter(x => console.log('Call filter() if you want'))
    );
}

你可以订阅这个 observable

const subscription = this.authService.signUpUser(email, password).subscribe(
  (firebaseUser) => {
    console.log('firebase user: ', firebaseUser);
    alert("Signup successful");
    this.router.navigate(['/sign-in']);
  },
  (error) => {
    alert(error.message);
  }
);

angular6 - Angular 6 错误不会触发

问题描述

解决方案

推荐阅读