Angular 6无法读取未定义的属性 'userEmail'

Question

代码:

// Angular Modules
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Title } from '@angular/platform-browser';

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

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.less']
})
export class ProfileComponent implements OnInit {
  title = 'Profile';
  showError = false;
  showSuccess = false;
  showAccountRemovalModal = false;

  profileForm: FormGroup;
  passwordForm: FormGroup;
  removeAccountForm: FormGroup;
  user: Object;
  userEmail: String;
  errorMessage: String;
  successMessage: String;

  constructor(private TitleService: Title,
              private fb: FormBuilder,
              private authService: AuthService) {

    // Creates the profileForm schema with validations.
    this.profileForm = this.fb.group({
      name: [{value: null, disabled: false}, Validators.required],
      username: [{value: null, disabled: true}, Validators.required],
      email: [{value: null, disabled: false}, [Validators.required, Validators.email]]
    });

    // Creates the passwordForm schema with validations.
    this.passwordForm = this.fb.group({
      passwords: fb.group({
        password: [null, [Validators.required]],
        confirmPassword: [null, [Validators.required]]
      }, {validator: this.passwordMatchValidator})
    });

    // Creates the removeAccountForm schema with validations.
    this.removeAccountForm = this.fb.group({
      emailAddress: fb.group({
        verifyEmail: [null, [Validators.required]]
      }, {validator: this.emailMatchValidator})
    });
  }

  // Compares the password and confirmPassword fields for a match.
  passwordMatchValidator(form: FormGroup) {
    return form.controls['password'].value === form.controls['confirmPassword'].value ? null : {
      'mismatch': true
    };
  }

  // Compares the entered email address field for account removal.
  emailMatchValidator(form: FormGroup) {
    return form.controls['verifyEmail'].value === this.userEmail ? null : {
      'mismatch': true
    };
  }

  // Updates the profile of the User.
  updateProfile(id, name, email) {
    const user = {
      name: name,
      email: email,
    };

    this.authService.updateUser(id, user).subscribe(data => {
      if (data) {
        console.log(data);
        this.successMessage = 'Your profile information has been updated!';
        this.showSuccess = true;
      } else {
        this.errorMessage = data.msg;
        this.showError = true;
      }
    });
  }

  removeUser(id) {
    this.authService.removeUser(id);
  }

  ngOnInit() {
    // Gets the current User object.
    this.authService.getUser().subscribe(profile => {
      this.user = profile;
      this.userEmail = profile.email;
    },
    err => {
      console.log(err);
      return false;
    });

    // Sets the page title.
    this.TitleService.setTitle('WODGate - ' + this.title);
  }
}

在底部，在我的 ngOnInit 中，我将一个有效的字符串推送到 userEmail 。 console.log(profile.email) 返回有效字符串。我收到的错误来自于我尝试读取 this.userEmail 的 emailMatchValidator 函数。实际上，即使我尝试在 .ts 文件中的任何位置读取 this.user ，我也会收到相同的错误。在我的 HTML 中，我必须使用 ? 运算符(例如 user?.email)读取值才能正常工作。

我需要能够读取 .ts 文件中的 this.userEmail，但收到错误“无法读取未定义的属性“userEmail””。

这是我的服务中的函数供引用:

// Return Single User
  getUser() {
    const headers = new Headers();
    this.loadToken();
    headers.append('Authorization', this.authToken);
    headers.append('Content-Type', 'application/json');
    return this.http.get('http://localhost:4000/api/users/' + this.user.id, {headers: headers})
      .map(res => res.json());
  }

Answer 1

emailMatchValidator 函数已丢失其上下文 - 意味着 this 现在未向组件显示。您需要显式绑定(bind)上下文或使用箭头函数。

使用显式绑定(bind)

{ validator: this.emailMatchValidator.bind(this) })

您说 this 将显示给 bind 函数的给定值 - 在我们的例子中显示为 ProfileComponent。