Question

我使类userData获得表单输入的值，然后使另一个类具有LoginData的相同值但具有另一个目的。我的问题class Student { public: string name; int *grade; Student (string a, int b); }; //Student header userData可以正常工作，但是console.log loginData则返回console.log。

null

我想使用UserData来存储注册表单数据，并使用LoginData来存储登录数据。注册有效，但登录无效。问题是loginData返回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(); }); }。

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

您需要对声明过程进行一些更改。

利用Angular生命周期挂钩ngOnInit()进行声明：

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

构造方法是该类的默认方法，该方法在以下情况下执行   该类被实例化并确保字段的正确初始化   在该类及其子类中。

ngOnInit是Angular2调用的生命周期挂钩，以指示   Angular完成了组件的创建。

Answer 3

您可以使用非常易于使用的反应式表格。首先将其导入到您的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类时，它返回null

3 个答案: