如何在另一个函数中使用ngOnInit()中定义的变量?

时间:2018-06-15 09:44:57

标签: javascript jquery angular angular5

我是角色5的新手。我正在使用jquery Rate Yo在anngular 5网站上评分。我在ngOnInit()中调用了评级插件,它运行正常。点击星标的值存储在this.ambthis.cleanthis.servthis.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();
    })
}

1 个答案:

答案 0 :(得分:0)

这是因为你使用传统功能而不是箭头功能

使用箭头功能

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