Question

我正在存储中存储用户ID，并在加载页面时尝试获取存储的id。

以下是代码段

constructor(
  private nav: NavController, 
  private auth: AuthService,
  public clockservice: ClockService,
  private alertCtrl: AlertController,
  private loadingCtrl: LoadingController,
  public storage: Storage
) {

  storage.get('name').then(val => {
    this.username = val; 
  })

  storage.get('id').then(val => {
    this.userid = val;     
    console.log(this.userid);
  })
}

ngOnInit() {    
  console.log("inside");
  console.log(this.userid); 
  getStatus();
}

getStatus() {
  this.showLoading();
  this.clockservice.getinoutstatus(this.userid).subscribe(
    result => {
      if (result.success) {
        // do something here
      } else {
        this.showError("API Error.");
      }
      this.loading.dismiss();
    },
    error => {
      this.showError("API Error.");
    }
  );
}

我面临的问题是在ngOnInit事件中未收到用户ID。控制台日志显示甚至在构造函数中收到用户标识之前就会调用ngOnInit。

控制台日志：

inside

1

如何确保在构造函数中收到所有get值后调用ngOnInit甚至？

Answer 1

最简单的解决方案是执行Promise.all等待检索两个存储值，然后调用getStatus：

ngOnInit() {
  Promise.all([
    this.storage.get('name'),
    this.storage.get('id')
  ])
  .then(([name, id]) => {
    this.username = name;
    this.userid = id;
    getStatus();
  })
  .catch(error => {
    this.showError("Storage Error.");
  });
}

在构造函数中检索存储值是可以的，但是 - 查看实现 - 似乎getStatus之前不应该调用ngOnInit。因此，将存储调用和承诺链移至ngOnInit

Ionic 2 - ngOnInit事件 - 获取存储问题

1 个答案: