Невозможно получить данные параметра на другой странице в Ionic с помощью navParams

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)));
  }

}

send-code.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

В вашем коде есть небольшое неправильное использование асинхронного.Async ждут, чтобы упростить ваш код, избавиться от него и поймать вложенный код.поэтому ваш код должен выглядеть так:

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 вам нужно вызвать этот метод sendCode из ionViewDidLoad следующим образом:

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);
  }

Answer 2

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() на второй странице?

Пожалуйста, проверьтеи дайте мне знать результат.