我的 Validator 类或可观察管道中的错误到底是什么错误在我的控制台中不断发生?

问题描述

一段时间后,我的控制台上不断出现错误。任何人都可以告诉我这是因为片状 API 吗?我是 Angular 的初学者

异步验证器类:

import { AsyncValidator,FormControl } from '@angular/forms'
import { AuthService } from '../auth.service'
import { Injectable } from '@angular/core';
import { map,catchError } from 'rxjs/operators'
import { of } from 'rxjs';

@Injectable ({providedIn : 'root'})

export class UniqueUsername implements AsyncValidator{
    constructor(private authService: AuthService){}

    validate = (control: FormControl) => {
        const { value } = control;
       
        return this.authService.usernameAvailable(value).pipe(
            map(()=> {
                return null;
            }),catchError(err=> {
                if(err.error.username){
                    return of({ nonUniqueUsername: true })
                }
                else{
                    return of({ noConnection: true})
                }
            })
        );
    }

    
}

服务:

   import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) { }

  usernameAvailable(username: string){
    return this.http.post<any>(' https://api.angular-email.com/auth/username ',{
      username: username
    })
  }
}

不断出现在我的控制台上的错误

enter image description here

解决方法

答案实际上在您的堆栈跟踪中。看起来您在 signup.component.html 上使用了 json 管道,但 Angular 不知道它是什么。这很可能是由于未在您的 AppModule 中导入 CommonModule 造成的:

import { CommonModule } from '@angular/common';


@NgModule({
    ...
    imports: [ CommonModule ]
    ...
})