Javascript Angular 2/Angular 4-无法读取在newZoneAwarePromise上定义的authService的属性

我已经创建了authService，在其中我创建了一个功能，用于检查电子邮件是否已经注册。虽然employee validation我调用此函数禁止电子邮件，但它给出了一个错误：无法读取在newZoneAwarePromise中定义的authService的属性

这是我的密码：

import { Component, OnInit } from '@angular/core';
import { NgForm, FormGroup, FormControl, Validators } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/Rx';

import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
  genders = ['male', 'female'];
  departments = ['IT', 'Account', 'HR', 'Sales'];
  employeeForm: FormGroup;
  employerData = {};

  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.employeeForm = new FormGroup({
      'name': new FormControl(null, [Validators.required]),
      'email': new FormControl(
          null,
          [Validators.required, Validators.email],
          this.forbiddenEmails
      ),
      'password': new FormControl(null, [Validators.required]),
      'gender': new FormControl('male'),
      'department': new FormControl(null, [Validators.required])
    });
  }

  registerEmployee(form: NgForm) {
    console.log(form);
    this.employerData = {
      name: form.value.name,
      email: form.value.email,
      password: form.value.password,
      gender: form.value.gender,
      department: form.value.department
    };

    this.authService
        .registerEmployee(this.employerData)
        .then(
            result => {
              console.log(result);
              if (result.employee_registered === true) {
                console.log('successful');
                this.employeeForm.reset();
                // this.router.navigate(['/employee_listing']);
              }else {
                console.log('failed');
              }
            }
        )
        .catch(error => console.log(error));
  }

  forbiddenEmails(control: FormControl): Promise<any> | Observable<any> {
    const promise = new Promise<any>((resolve, reject) => {
      this.authService
          .employeeAlreadyRegistered(control.value)
          .then(
              result => {
                console.log(result);
                if (result.email_registered === true) {
                  resolve(null);
                }else {
                  resolve({'emailIsForbidden': true});
                }
              }
          )
          .catch(error => console.log(error));
      /*setTimeout(() => {
        if (control.value === 'test@test.com') {
          resolve({'emailIsForbidden': true});
        } else {
          resolve(null);
        }
      }, 1500);*/
    });
    return promise;
  }

}

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{NgForm，FormGroup，FormControl，Validators}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/toPromise”；
进口“rxjs/Rx”；
从“../auth/auth.service”导入{AuthService}；
@组成部分({
选择器：“应用程序员工”，
templateUrl:“./employee.component.html”，
样式URL:['./employee.component.css']
})
导出类EmployeeComponent实现OnInit{
性别=[‘男性’、‘女性’]；
部门=[“IT”、“会计”、“人力资源”、“销售”]；
员工形式：FormGroup；
employerData={}；
构造函数（私有authService:authService）{}
恩戈尼尼特（）{
this.employeeForm=新表单组({
“名称”：新FormControl（null，[Validators.required]），
“电子邮件”：新表单控件(
无效的
[Validators.required，Validators.email]，
这是禁止的电子邮件
),
“密码”：新FormControl（null，[Validators.required]），
“性别”：新FormControl（“男性”），
“部门”：新FormControl（null，[Validators.required]）
});
}
注册雇员（表格：NgForm）{
控制台日志（表格）；
this.employerData={
名称：form.value.name，
电子邮件：form.value.email，
密码：form.value.password，
性别：形式、价值、性别，
部门：form.value.department
};
这是authService
.registerEmployee（此.employerData）
.那么(
结果=>{
控制台日志（结果）；
if（result.employee_registed===true）{
console.log（'successful'）；
这个.employeeForm.reset（）；
//this.router.navigate（['/employee_listing']）；
}否则{
console.log（'failed'）；
}
}
)
.catch（错误=>console.log（错误））；
}
禁止电子邮件（控制：FormControl）：承诺|可观察{
持续承诺=新承诺（（解决、拒绝）=>{
这是authService
.EmployeeReadyRegistered（control.value）
.那么(
结果=>{
控制台日志（结果）；
如果（result.email_registed===true）{
解析（空）；
}否则{
解析（{'emailIsForbidden'：true}）；
}
}
)
.catch（错误=>console.log（错误））；
/*设置超时（（）=>{
如果（control.value==='test@test.com') {
解析（{'emailIsForbidden'：true}）；
}否则{
解析（空）；
}
}, 1500);*/
});
回报承诺；
}
}

授权服务代码：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/Rx';

@Injectable()
export class AuthService {
    url = 'http://mnc.localhost.com/api/user/';
    response: object;

    constructor(private http: Http) {}

    signInUser(email: string, password: string): Promise<any>  {
        console.log('1111');
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this.http
            .post(this.url + 'signIn', { email: email, password: password }, options)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    registerEmployee(employeeData: object): Promise<any> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this.http
            .post(this.url + 'registerEmployee', employeeData, options)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    employeeAlreadyRegistered(email: string): Promise<any> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this.http
            .post(this.url + 'employeeAlreadyRegistered', { email: email }, options)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || {};
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }

}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从'@angular/http'导入{Headers，RequestOptions}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/toPromise”；
进口“rxjs/Rx”；
@可注射（）
导出类身份验证服务{
url='1〕http://mnc.localhost.com/api/user/';
答复：对象；
构造函数（私有http:http）{}
签名用户（电子邮件：string，密码：string）：承诺{
控制台日志（'1111'）；
let headers=新的头（{'Content-Type'：'application/json'}）；
let options=newrequestoptions（{headers:headers}）；
返回此文件。http
.post（this.url+'signIn'，{email:email，password:password}，选项）
.toPromise（）
.然后（此.extractData）
.接住（这个.把手错误）；
}
registerEmployee（employeeData:object）：承诺{
let headers=新的头（{'Content-Type'：'application/json'}）；
let options=newrequestoptions（{headers:headers}）；
返回此文件。http
.post（this.url+'registereemployee'，employeeData，选项）
.toPromise（）
.然后（此.extractData）
.接住（这个.把手错误）；
}
EmployeeReadyRegistered（电子邮件：string）：承诺{
let headers=新的头（{'Content-Type'：'application/json'}）；
let options=newrequestoptions（{headers:headers}）；
返回此文件。http
.post（this.url+'employeeAlreadyRegistered'，{email:email}，选项）
.toPromise（）
.然后（此.extractData）
.接住（这个.把手错误）；
}
私有数据（res:Response）{
让body=res.json（）；
返回体| |{}；
}
私有句柄错误（错误：任意）：承诺{
console.error（'发生错误'，error）；//仅用于演示目的
返回承诺。拒绝（error.message | | error）；
}
}

registerEmployee函数也使用authservice，但在我添加此验证之前，它运行良好，这意味着禁止电子邮件函数中存在一些问题

我是angular js新手，无法解决此问题。

在您的

ngOnInit（）

中更改您声明电子邮件自定义验证程序的方式：

ngOnInit() {
  this.employeeForm = new FormGroup({
    'name': new FormControl(null, [Validators.required]),
    'email': new FormControl(
        null,
        [Validators.required, Validators.email],
        (control: FormControl) => {
            // validation email goes here
            // return this.forbiddenEmails(control);
        }
    ),
    'password': new FormControl(null, [Validators.required]),
    'gender': new FormControl('male'),
    'department': new FormControl(null, [Validators.required])
  });
}

验证器导致错误是因为

此

的上下文在分配时更改为

FormGroup

类：

'email': new FormControl(
    null,
    [Validators.required, Validators.email],
    (control: FormControl) => this.forbiddenEmails
)

这就是为什么调用

authService

时出现

undefined

错误的原因，因为它查看的是

FormGroup

类，而不是

组件中的

注意：仅当用户试图提交表单或对电子邮件元素失去关注时，才检查
禁止电子邮件
。把它放在验证器中是不好的，因为验证器往往要执行很多次

希望对您有所帮助
您是否在
@NgModule provid中添加了
AuthService