如何在另一个函数中使用ngOnInit（）中的已定义变量？

Question

I'm new to angular 5. I'm using jquery Rate Yo pluging for rating in anngular 5 website. where I called rating plugin in ngOnInit() and it's working fine. The value of clicking star is storing in this.amb , this.clean , this.serv , this.comf . These all values are showing in console. I want to use this values with my API which is on Submit button but there value of these variables getting undefined. So how to get these value on my onSubmit() function.? Please help.

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

Answer 1

It's because you use traditional functions and not arrow function

Using Arrow function

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

For a good rating component : https://primefaces.org/primeng/#/rating