Question

我遇到一种情况，我想将从数据库中获取的值传递给Ionic中的另一页。

问题在于该值已在第1页（ForgotPasswordPage）上正确获取并打印，但在第2页（SendCodePage）上却未检索

忘记密码.ts

export class ForgotPasswordPage {
  forgotPassword = {} as ForgotPasswordModel;
  phone: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, private userProvider: UserProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ForgotPasswordPage');
  }

  //GETS INVOKED ON BUTTON CLICK ON PAGE
  goSendCode() {
    (async () => {
      await this.getCurrentUserDetails(this.forgotPassword.email);
      //send the phone number we got above to next page
      this.navCtrl.push(SendCodePage, {phone: this.phone, firstName: "zzzz"});
    })();
  }

  getCurrentUserDetails(email: string) {
    this.userProvider.getUserByEmail(email)
      .then((currentUser: User) => {
        this.phone = currentUser.phone;
        console.log("phone: " + this.phone); //phone PRINTS FINE HERE
      })
      .catch(e => console.error(JSON.stringify(e)));
  }

}

发送代码.ts（这不会接收电话参数值）

export class SendCodePage {

  constructor(private navCtrl: NavController, private sms: SMS, private navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SendCodePage');
  }

  doSendCode() {
    (async () => {
      let firstName:string = this.navParams.get("firstName");
      let phone:string = this.navParams.get("phone");
      console.log("firstName: " + firstName); //PRINTS zzzz
      console.log("phone: " + phone); //PRINTS undefined 

      //generating a random 6 digit number here and sending sms
      let code = Math.floor(Math.random() * 90000) + 10000;
      console.log("code: " + code)
      await this.sms.send(phone, code.toString());

      //navigate
      this.navCtrl.push(ResetPasswordPage);
    })();
  }

}

控制台日志：

[app-scripts] [00:35:27]  console.log: ionViewDidLoad SendCodePage
[app-scripts] [00:35:27]  console.log: phone: 1005009001
[app-scripts] [00:35:29]  console.log: firstName: zzzz
[app-scripts] [00:35:29]  console.log: phone: undefined
[app-scripts] [00:35:29]  console.log: code: 41676
[app-scripts] [00:35:30]  console.log: ionViewDidLoad ResetPasswordPage

Answer 1

goSendCode() {
    (async () => {
      await this.getCurrentUserDetails(this.forgotPassword.email);
    })();
  }



getCurrentUserDetails(email: string) {
    this.userProvider.getUserByEmail(email)
      .then((currentUser: User) => {
        this.phone = currentUser.phone;
        console.log("phone: " + this.phone); //phone PRINTS FINE HERE
          **//send the phone number we got above to next page
          this.navCtrl.push(SendCodePage, {phone: this.phone, firstName: "zzzz"});**
      })
      .catch(e => console.error(JSON.stringify(e)));
  }

请将this.navCtrl.push(SendCodePage, {phone: this.phone, firstName: "zzzz"})添加到getCurrentUserDetails()方法的成功回调中。因为push(<>)可能会在api调用完成之前调用。

还有另一件事，您从第二页的哪里调用方法doSendCode()？

请检查并告知结果。

Answer 2

您的代码中有少量的异步等待滥用。异步等待在那里可以简化您的代码，然后摆脱它并捕获嵌套代码。因此您的代码应如下所示：

async goSendCode() {
    const user = await this.getCurrentUserDetails(this.forgotPassword.email);
    this.navCtrl.push(SendCodePage, {phone: user.phone, firstName: user.firstName});
  }

getCurrentUserDetails(email: string) {
    return this.userProvider.getUserByEmail(email)
}

如您在上面看到的那样，此代码看起来更具可读性。

在您的SendCodePage中，您需要像这样从ionViewDidLoad调用该方法sendCode：

ionViewDidLoad() {
    console.log('ionViewDidLoad SendCodePage');
    this.doSendCode();
}

同样，您不需要将异步等待封装在匿名函数中，因为它只会增加混乱：

async doSendCode() {
      let firstName:string = this.navParams.get("firstName");
      let phone:string = this.navParams.get("phone");
      console.log("firstName: " + firstName); //PRINTS zzzz
      console.log("phone: " + phone); //PRINTS undefined 

      //generating a random 6 digit number here and sending sms
      let code = Math.floor(Math.random() * 90000) + 10000;
      console.log("code: " + code)
      await this.sms.send(phone, code.toString());
      //navigate
      this.navCtrl.push(ResetPasswordPage);
  }

无法使用navParams在Ionic的另一页上获取参数的数据

2 个答案: