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

这可能是一个愚蠢的问题，但是，当我试图在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){
      // 
    }
  }

}

---

您正在尝试同步使用从异步操作加载的数据：

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({
     ...
  });
}

---

我会尝试将this.authForm部分移动到单独的函数initForm中，然后在本机存储的内部调用该函数。我很确定这是因为表单试图在从本机存储加载值之前创建。感谢您的响应，如果我使用platform.ready（）并将代码移动到该块中，会有帮助吗？在本机设备上，这可能也是必需的。@Arun-检查更新的答案并让我知道这是如何发生的。我收到了错误错误：formGroup需要一个formGroup实例。请传入一个“因此我遇到了问题，发件人仍然没有初始化我在表单标记上添加了一个*ngIf=“userGender”，这将等待userGender加载值，然后呈现表单。