無法讀取屬性未定義的

Question

我正在嘗試爲表單上的某個輸入創建異步驗證器。這是簡化版本。

function asyncEmailExistsValidator(control: FormControl): Observable<any> { 
    const value: string = control.value || ''; 
    let valid = true; 
    if (value == 'johndoe@yahoo.com') { 
     valid = false; 
    } 

    return Observable.of(valid ? null : { emailExists: true }).delay(5000); 
} 

在執行的那一刻起，我得到錯誤：錯誤類型錯誤：無法讀取的不確定「的」屬性。當我嘗試調試時，我發現Observable未定義。

這是此組件的完整代碼。

import { Component, OnInit } from "@angular/core"; 
import { FormBuilder, FormGroup, FormControl, Validators } from "@angular/forms"; 
import { Router, ActivatedRoute } from "@angular/router"; 

import { Observable } from 'rxjs/Observable'; 

import { CustomDataValidator } from "./../../services/validators/input-custom-validator"; 
import { AccountService } from "./../../services/account.service"; 

function asyncEmailExistsValidator(control: FormControl): Observable<any> { 
    const value: string = control.value || ''; 
    let valid = true; 
    if (value == 'johndoe@yahoo.com') { 
     valid = false; 
    } 

    return Observable.of(valid ? null : { emailExists: true }).delay(5000); 
} 

@Component({ 
    selector: "email-change", 
    templateUrl: "app/components/email-change/email-change.html", 
    styleUrls: ["app/components/email-change/email-change.css"] 
}) 

export class EmailChangeComponent implements OnInit { 
    emailChangeForm: FormGroup; 
    submitError: boolean = false; 
    submitErrorMessage: string = ""; 
    oldEmail = this.activatedRoute.snapshot.params["email"]; 

    emailExists: boolean = false; 
    emailConfirmClass: string = ""; 

    formValidationTest: boolean = true; 

    constructor(private fb: FormBuilder, private router: Router, private dataValidator: CustomDataValidator, 
     private activatedRoute: ActivatedRoute, private accountService: AccountService) { } 

    ngOnInit(): void { 
     this.emailChangeForm = this.fb.group({ 
      currentEmail: [{ value: this.oldEmail, disabled: true }, null ], 
      newEmailAddress: ["", 
       [ 
        Validators.required, 
        Validators.pattern('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$'), 
        asyncEmailExistsValidator 
       ] 
      ], 
      newEmailAddressConfirm: ["", [Validators.required]] 
     }); 
    } 

    onSubmit =(): any => { 
     this.accountService.changeEmail({ 
      oldEmailAddress: this.oldEmail, newEmailAddress: this.emailChangeForm.value.newEmailAddress 
      }) 
      .subscribe((data: any) => { 
       if (data.error === true) { 
        this.submitErrorMessage = data.errorMessage; 
        this.submitError = true; 
       } 
       else { 
        this.router.navigate(["my_profile"]); 
       } 
      }); 
    } 

    onCancel =(): any => { 
     this.router.navigate(["my_profile"]); 
    } 
} 

這裏是我的package.json

{ 
    "version": "1.0.0", 
    "name": "tech-services", 
    "private": true, 
    "dependencies": { 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@angular/upgrade": "^4.0.0", 
    "bootstrap": "^3.3.7", 
    "material-design-lite": "^1.3.0", 
    "core-js": "^2.4.1", 
    "moment": "^2.14.1", 
    "reflect-metadata": "^0.1.10", 
    "rxjs": "5.1.0", 
    "systemjs": "^0.20.9", 
    "zone.js": "^0.7.6" 
    }, 
    "devDependencies": { 
    "@types/core-js": "0.9.36", 
    "gulp": "^3.9.1", 
    "gulp-clean": "^0.3.2", 
    "gulp-concat": "^2.6.1", 
    "gulp-less": "^3.3.0", 
    "gulp-sourcemaps": "^2.4.0", 
    "gulp-typescript": "^3.1.5", 
    "gulp-uglify": "^2.0.0", 
    "typescript": "^2.2.1", 
    "typings": "2.1.0" 
    } 
} 

Answer 1

導入以下模塊

import 'rxjs/add/observable/of'; 

或者，如果你使用的許多人，那麼你可以使用導入所有

import 'rxjs/Rx';