Angular2/4：访问在父类中声明的变量

Question

这可能是一个愚蠢的问题，但是，当我试图获取 console.log(this.userGender) 中的值时，它是未定义的。我正在使用 localStorage 来获取我想将它传递给表单控件的 userGender 的值。当我在父类 PersonalDetailsPage 下声明它时，我对为什么无法访问它的值感到有点困惑

这是我的js代码：

import { Component } from '@angular/core';
import { NavController, NavParams ,Platform} from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';
import {FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms';
import { CustomValidtorsProvider } from '../../providers/custom-validators/custom-validators';

@Component({
  selector: 'personal-details',
  templateUrl: 'personal-details.html',
})
export class PersonalDetailsPage {
  authForm : FormGroup;
  username : AbstractControl;
  phone : AbstractControl;
  dob : AbstractControl;
  pincode : AbstractControl;
  address : AbstractControl;
  state : AbstractControl;
  city: AbstractControl;
  gender : AbstractControl;
  email : AbstractControl;
  myDate : AbstractControl;  
 userEmail : string;
 userPhone : number;
 userDob : string;
 userAddress : string;
 userPincode : number;
 userGender : string;
 userState : string;
 userCity : string;
 userImg : any;
 userName : string;
  constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage : NativeStorage, private fb : FormBuilder,
  private platform : Platform ) {
      this.nativeStorage.getItem("fbLogin").then((data)=>{
      this.userImg = data.picture;
      this.userName = data.name;
      this.userEmail = data.email;
    }).catch((c)=>{console.log(c);this.userImg = "http://icons.iconseeker.com/png/fullsize/transformers-x-vol-3/heroic-autobots-1.png"});
    this.nativeStorage.getItem("profileData").then((data)=>{   

      this.userName =  data.FullName;
      this.userEmail = data.EmailID;
      this.userPhone = data.Phone;
      this.userAddress = data.Address1;
      this.userPincode = data.PinCode;
      this.userGender= data.Gender;
      this.userDob =  data.Dob;
      this.userCity = data.City;
      this.userState = data.State;
      }).catch((c)=>{console.log(c)})


      this.authForm = fb.group({
        'username':['', Validators.compose([Validators.required])],
        'password':['',Validators.compose([Validators.required])],
        'phone':['', Validators.compose([Validators.required])],
        //'dob':['', Validators.compose([Validators.required])],
        'pincode':['', Validators.compose([Validators.required])],
        'address':['', Validators.compose([Validators.required])],
        'state':['', Validators.compose([Validators.required])],
        'city':['', Validators.compose([Validators.required])],
        'gender':['', Validators.compose([Validators.required])],
        'email':['', Validators.compose([Validators.required,CustomValidtorsProvider.EmailValidator])],
        'myDate':['',""],
      }); 
      this.username = this.authForm.controls['username'];
      this.phone = this.authForm.controls['phone'];
      //this.dob = this.authForm.controls['dob'];
      this.pincode = this.authForm.controls['pincode'];
      this.address = this.authForm.controls['address'];
      this.state = this.authForm.controls['state'];
      this.city = this.authForm.controls['city'];
      this.gender = this.authForm.controls['gender'];
      this.email = this.authForm.controls['email'];
      this.myDate = this.authForm.controls['myDate'];
      console.log(this.userGender);      
      this.authForm.controls.gender.setValue(this.userGender);
  }

  ionViewDidLoad() {


  }


  onSubmit(value: string) : void{ 
    if(this.authForm.valid){
      // 
    }
  }

}

Answer 1

您正在尝试同步使用从异步操作加载的数据：this.nativeStorage.getItem()。

改变你的程序流程如下：

this.platform.ready()
.then(()=> {
  return this.nativeStorage.getItem('profileData');
})
.then((data)=> {
  this.userGender = data.Gender;
  ...
  this.initializeForm(); // initialize form only after native/local storage loads all the data
});

initializeForm (){
  console.log(this.userGender); // will print value from local/native storage by this point
  this.authForm = this.fb.group({
     ...
  });
}