javascript - 如何在另一个函数中使用来自 ngOnInit() 的定义变量？

Question

我是 Angular 5 的新手。我正在使用 jquery Rate Yo 插件在 Angular 5 网站中进行评级。我在其中调用了评级插件ngOnInit()，它工作正常。点击星的值存储在this.amb, this.clean, this.serv, 中this.comf。这些所有值都显示在控制台中。我想将此值与API提交按钮上的我一起使用，但这些变量的值未定义。那么如何在我的onSubmit()功能上获得这些价值。？请帮忙。

ngOnInit() {
    $(function () { 
        $("#ambience").rateYo({
          starWidth: "18px",
          fullStar: true,
          halfStar: false,
          onSet: function (rating, rateYoInstance) { 

            this.amb = rating;
            console.log(this.amb);
          },              
        });

      });
      $(function () { 
        $("#serviceq").rateYo({
          starWidth: "18px",
          fullStar: true,
          halfStar: false,
          onSet: function (rating, rateYoInstance) { 

            this.serv = rating;
            console.log(this.serv);
          },              
        });

      });
      $(function () { 
        $("#clean").rateYo({
          starWidth: "18px",
          fullStar: true,
          halfStar: false,
          onSet: function (rating, rateYoInstance) { 

            this.clean = rating;
            console.log(this.clean);
          },              
        });

      });
      $(function () { 
        $("#comfort").rateYo({
          starWidth: "18px",
          fullStar: true,
          halfStar: false,
          onSet: function (rating, rateYoInstance) { 

            this.comf = rating;
            console.log(this.comf);
          },              
        });

      });   
   }

      onSubmit() {       
             this.common.createAPIService('api/contact/Feedback?FirstName=' + this.formGroup.controls.FirstName.value + '&LastName=' + this.formGroup.controls.LastName.value + '&Address=' + this.formGroup.controls.Address.value + '&City=' + this.formGroup.controls.City.value + '&Cinema=' + this.formGroup.controls.Cinema.value + '&Pincode=' + this.formGroup.controls.Picode.value + '&Phone=' + this.formGroup.controls.Mobile.value + '&Email=' + this.formGroup.controls.Email.value + '&Comments=' + this.formGroup.controls.Comments.value + '&ServiceQuality='+ this.serv +'&Ambience=' + this.amb +'&Cleanliness='+ this.clean + '&Comfort='+ this.comf,'').subscribe((result: any) => {
        //alert(result.Message);
      this.common.ShowNotification("FeedBack", result.Message, "info");
        this.onReset();
    })
}

标签： javascriptjqueryangularangular5

Answer 1

这是因为您使用的是传统函数而不是箭头函数

使用箭头功能

ngOnInit() {
    $(() => { 
        $("#ambience").rateYo({
          starWidth: "18px",
          fullStar: true,
          halfStar: false,
          onSet: function (rating, rateYoInstance) { 

            this.amb = rating;
            console.log(this.amb);
          },              
        });

      });
      $(() => { 
        $("#serviceq").rateYo({
          starWidth: "18px",
          fullStar: true,
          halfStar: false,
          onSet: function (rating, rateYoInstance) { 

            this.serv = rating;
            console.log(this.serv);
          },              
        });

      });
      $(() => { 
        $("#clean").rateYo({
          starWidth: "18px",
          fullStar: true,
          halfStar: false,
          onSet: function (rating, rateYoInstance) { 

            this.clean = rating;
            console.log(this.clean);
          },              
        });

      });
      $(() => { 
        $("#comfort").rateYo({
          starWidth: "18px",
          fullStar: true,
          halfStar: false,
          onSet: function (rating, rateYoInstance) { 

            this.comf = rating;
            console.log(this.comf);
          },              
        });

      });   
   }

      onSubmit() {       
             this.common.createAPIService('api/contact/Feedback?FirstName=' + this.formGroup.controls.FirstName.value + '&LastName=' + this.formGroup.controls.LastName.value + '&Address=' + this.formGroup.controls.Address.value + '&City=' + this.formGroup.controls.City.value + '&Cinema=' + this.formGroup.controls.Cinema.value + '&Pincode=' + this.formGroup.controls.Picode.value + '&Phone=' + this.formGroup.controls.Mobile.value + '&Email=' + this.formGroup.controls.Email.value + '&Comments=' + this.formGroup.controls.Comments.value + '&ServiceQuality='+ this.serv +'&Ambience=' + this.amb +'&Cleanliness='+ this.clean + '&Comfort='+ this.comf,'').subscribe((result: any) => {
        //alert(result.Message);
      this.common.ShowNotification("FeedBack", result.Message, "info");
        this.onReset();
    })
}

对于一个好的评级组件：https ://primefaces.org/primeng/#/rating