Когда я console.log класс возвращает ноль

Question

Я создаю класс userData для получения значений входных данных форм, затем создаю другой класс с LoginData с тем же значением, но с другой целью.Моя проблема, когда я console.log userData работает нормально, но когда console.log loginData возвращает 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 возвращает null.

Answer 1

Поместите свои 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 2

Вы можете использовать Реактивные формы, которые очень просты в использовании.Сначала импортируйте его в ваш 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>

Теперь он должен работать.Посмотрите больше на реактивные формы, они действительно потрясающие!

Answer 3

Вам необходимо внести некоторые изменения в ваш процесс декларирования.

Использовать угловой цикл жизненного цикла ngOnInit(), чтобы сделать ваши декларации:

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

Конструктор - это метод по умолчанию для класса, который выполняется при создании экземпляра класса и обеспечивает правильную инициализацию полей в классе и его подклассах.

ngOnInit - это хук жизненного цикла, вызываемый Angular2 для указаниячто Angular завершил создание компонента.