Ionic 4 将变量传递给模态

Question

我正在尝试将数据传递给模态，但变量未定义。问题是我在 addtocart() 函数中有一个 'uid' 变量，并试图将这个 'uid' 变量发送到模态函数 opencart()。我只是不能在 addtocart() 函数中调用模态函数（），因为每次调用 addtocart() 函数时都会打开模态。
有什么方法可以将一个函数中的变量用于另一个函数

点击按钮时的函数()

addToCart(product, price) {

    this.afauth.authState.subscribe(user =>{
      if(user) {
        this.id = user.uid
        console.log("firebase uid " + this.id)

        this.userService.findUserId(this.id).subscribe(data=>{
          console.log(data)
          this.user_id = data;

          for(let i =0 ; i<this.user_id.length; i++) {
            this.uid = this.user_id[i].id
            console.log("user id" + this.uid)
          }

          let cart = {
            date : new Date(),
            quantity : Number (this.selected_quant),
            price : this.price,
            user_id :this.uid,
            product_id : product.product_id 

          }

          this.cartService.addTocart(cart).subscribe(data =>{
            console.log(data)
            this.cartItemCount.next(this.cartItemCount.value + 1);

          })


        })
      }
    })

  }

模态函数：

async openCart() {

        this.animateCSS('bounceOutLeft', true);
        let modal = await this.modalCtrl.create({
          component: CartModalPage,
          cssClass: 'cart-modal',
          componentProps: { 

            user_id : this.uid // undefined
          }
        });
        modal.onWillDismiss().then(() => {
          this.fab.nativeElement.classList.remove('animated', 'bounceOutLeft')
          this.animateCSS('bounceInLeft');
        });
        modal.present();
      }

Answer 1

为了适当地帮助解决这个问题，我认为理想情况下你应该分享更多你的代码和用例，因为目前还不清楚为什么你不能在组件的 ngAfterViewInit 钩子上只更新一次这样的核心值。但是断章取义我会这样解决：

addToCart(product, price) {

    this.afauth.authState.subscribe( user => {

      if (user) {

        this.id = user.uid
        console.log("firebase uid " + this.id)

        this.userService.findUserId(this.id).subscribe(data=>{

          this.user_id = data;


          // unclear why would you loop through the array if the only thing you do is grabbing last item?
          /* for(let i =0 ; i<this.user_id.length; i++) {
            this.uid = this.user_id[i].id
            console.log("user id" + this.uid)
          } */
          this.uid = this.user_id[this.user_id.length-1].id;

          let cart = {
            date : new Date(),
            quantity : Number (this.selected_quant),
            price : this.price,
            user_id :this.uid,
            product_id : product.product_id 
          }

          this.cartService.addTocart(cart).subscribe(data => {

            this.cartItemCount.next(this.cartItemCount.value + 1);

          })


        })

      } else {

        console.log("such user does not exist")

      };

    })

}

async openCart() {

    if (this.uid) {

        this.animateCSS('bounceOutLeft', true);

        let modal = await this.modalCtrl.create({
          component: CartModalPage,
          cssClass: 'cart-modal',
          componentProps: { 
            user_id : this.uid
          }
        });

        modal.onWillDismiss().then(() => {
          this.fab.nativeElement.classList.remove('animated', 'bounceOutLeft')
          this.animateCSS('bounceInLeft');
        });

        modal.present();

    } else {

        this.afauth.authState.subscribe( user => {

            if (user) {

              this.id = user.uid

              this.userService.findUserId(this.id).subscribe( data => {

                this.user_id = data;

                this.uid = this.user_id[this.user_id.length-1].id;

                this.opencart();

              })

            }
        })

    }

}

你的 addToCart() 方法没有变化，我唯一改变的是我只是抓住了你正在迭代的数组中的最后一项，而不是 for 循环。

现在使用第二种方法（模态）——我添加了条件，如果 'this.uid' 不存在——我们确实需要获取它，然后再次调用同一个函数。如果它确实存在 - 您可以正常进行调用模态。

希望对您有所帮助。

Ionic 4 将变量传递给模态

Ionic 4 pass variable to modal

ionic4