如何在angular2中的同一控制器内的另一个函数中调用一个函数

Question

我正在处理登录页面。我想做的是在 class validateLogin() 和 submit() 中有两个函数。单击登录按钮时，我已成功提交，我可以获得用户名和密码。

我正在尝试在我的提交函数中调用我的 validateLogin 函数，但我无法调用它，我的 sublime 文本在 validateLogin 上显示错误，我的 chrome 浏览器中没有收到任何错误。

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {FormBuilder,Validators} from "@angular/common";

@Component({
  templateUrl: 'build/pages/home/home.html'
})

export class HomePage {

    public loginForm: any;
  public commentOnTimeOut: any;

  constructor(private navCtrl: NavController, public form:FormBuilder) {
    this.loginForm = this.form.group({
        "email":["",Validators.required],
        "password":["",Validators.required]
    })
  }

  validateLogin(cb){
    window.setTimeout( () => {
        if (this.loginForm.value.email == 'admin' && this.loginForm.value.password == 'admin123') {
          console.log("invoking If part");
          cb('valid User');
        }
        else {
          console.log("invoking elsePart");
          cb('Invalid User');
        }
    }, 3000);
  }

  submit(){

    console.log(this.loginForm.value);
    console.log(this.loginForm.value.email);
    console.log(this.loginForm.value.password);

    validateLogin(this.loginForm.value.email, this.loginForm.value.password, (response) => {
      console.log(response);
      this.commentOnTimeOut = response;
    })

    this.commentOnTimeOut = "Validating User";
    console.log(this.commentOnTimeOut);
  }  

}

如何在我的提交函数中调用我的函数 validateLogin？

这是一个 demo plunker 效果很好的地方

错误：

GET http://localhost:8100/build/js/app.bundle.js in my console.

In my serve i get error like TypeScript error: /home/panini/AutoSparParts/app/pages/home/home.ts(40,5): Error TS2663: Cannot find name 'validateLogin'. Did you mean the instance member 'this.validateLogin'?

上面的错误我正在调用任何帮助

Answer 1

要访问 class 成员，您需要在任何 class 成员之前使用 this.，在您的情况下试试这个

this.validateLogin(this.loginForm.value.email, this.loginForm.value.password, (response) => {
   console.log(response);
   this.commentOnTimeOut = response;
})

Answer 2

由于您正在使用 class 的实例，如果您想引用该实例中的属性或方法，您必须在属性或方法名称之前添加 this.。

In my serve i get error like TypeScript error: /home/panini/AutoSparParts/app/pages/home/home.ts(40,5): Error TS2663: Cannot find name 'validateLogin'. Did you mean the instance member 'this.validateLogin'?

那是因为如果不将 this 添加到 validateLogin 方法，将查找具有该名称的全局方法，并且由于它不存在，因此抛出错误。所以你的submit方法应该是：

submit(){

    console.log(this.loginForm.value);
    console.log(this.loginForm.value.email);
    console.log(this.loginForm.value.password);

    this.validateLogin(this.loginForm.value.email, this.loginForm.value.password, (response) => {
      console.log(response);
      this.commentOnTimeOut = response;
    })

    this.commentOnTimeOut = "Validating User";
    console.log(this.commentOnTimeOut);
  }

更新：

yes i try that this. and i get error like TypeScript error: /home/panini/AutoSparParts/app/pages/home/home.ts(40,5): Error TS2346: Supplied parameters do not match any signature of call target.

那是因为您的 validateLogin 方法只需要一个参数（cb 参数），而您要发送三个参数（电子邮件、密码和回调）。

尝试像这样修改该行：

 // New method to handle the response
 processLoginResult(response) {
    console.log(response);
    this.commentOnTimeOut = response;
 }

 submit(){

    console.log(this.loginForm.value);
    console.log(this.loginForm.value.email);
    console.log(this.loginForm.value.password);

    // Instead of calling it with email, password and the callback
    // just send the added method as a callback 
    this.validateLogin(this.processLoginResult);

    this.commentOnTimeOut = "Validating User";
    console.log(this.commentOnTimeOut);
}

如何在angular2中的同一控制器内的另一个函数中调用一个函数

How to call one function in another function inside same controller in angular2

angular

typescript

ionic2

ionic3