当我 console.log class 它 returns null

Question

我制作 class userData 以获取表单输入的值，然后制作另一个 class 和具有相同值但具有不同目的的 LoginData。我的问题是当我 console.log userData 它工作正常但是当 console.log loginData 它 returns null.

constructor(private alertCtrl: AlertController, public navCtrl: 
    NavController, public navParams: NavParams, public authService: 
    UserProvider, public loadingCtrl: LoadingController, private toastCtrl: 
    ToastController) { 

    console.log(this.loginData)
}

userData = {
    "name":  "",
    "email": "" ,
    "Type_Id" : "", 
    "Mobile" : "",
    "password": "",
};

loginData = {
    UserEmail: this.userData.name ,
    Password:  this.userData.email
}

signup(){
  this.showLoader();
  console.log(this.loginData)

  this.authService.postData(this.userData,'Regestier').then((result) => {
    var userinfo = this.responseData;

    console.log(this.responseData);
    localStorage.setItem('userinfo', this.responseData);

    this.login()
    /* if (this.responseData.Type_Id = "1"){
    this.navCtrl.push(CompanyProfilePage, {}, {animate: true, direction: 
    'forward'});
    }
    else
    {
      this.navCtrl.setRoot(DashboardPage, {}, {animate: true, direction: 
      'forward'});

    }*/

    this.loading.dismiss();
    this.presentPrompt()
 },

 (err) => {
   // Error log
    this.loading.dismiss();

  });

}

我想使用 UserData 存储注册表单数据，使用 LoginData 存储登录数据。注册有效但登录无效。问题是 loginData returns null.

Answer 1

您需要对申报流程进行一些更改。

使用 Angular 生命周期钩子 ngOnInit() 来做你的声明：

ngOnInit(){
    this.loginData = {
       UserEmail: this.userData.name ,
       Password:  this.userData.email
    }
}

The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses.

ngOnInit is a life cycle hook called by Angular2 to indicate that Angular is done creating the component.

Answer 2

把你的 userData 和 loginData 放在 constructor 里面。

export class MyComponent {

  userData; loginData;

  constructor(public navCtrl: NavController) {

    this.userData = {
    "name":  "",
    "email": "" ,
    "Type_Id" : "", 
    "Mobile" : "",
    "password": "",
    };

    this.loginData = {
    UserEmail: this.userData.name ,
    Password:  this.userData.email
    };
  }

  ngOnInit() {

    console.log(this.loginData);
  }

}

exmaple

Answer 3

您可以使用非常易于使用的 Reactive 表单。首先像这样将其导入 app.module.ts：

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

然后像这样将它们添加到您的导入数组中，

  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],

这就是您的 component.ts 的样子：

import { Component } from '@angular/core';
import { FormGroup,FormControl,FormBuilder } from '@angular/forms';

 @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 name = 'Angular';
 userData:FormGroup;
 constructor(fb:FormBuilder){
this.userData = fb.group({
  name : new FormControl(''),
  email : new FormControl(''),
  Type_Id : new FormControl(''),
  Mobile : new FormControl(''),
  Password : new FormControl(''),
 })
}

signup(){
console.log(this.userData.value.email);
console.log(this.userData.value.Password);
 }
}

那么您的 component.html 文件可能如下所示：

<form [formGroup]="userData" (ngSubmit)="signup()">
 <input type="text" formControlName="email">
 <input type="password" formControlName="Password">
 <button (click)="signup()">signup</button>
</form>

现在应该可以了。多看看响应式表单，它们真的很棒！

当我 console.log class 它 returns null

When I console.log class it returns null

typescript

console.log

ionic3

angular