kendouiカレンダーコントロールから選択した日付をグローバル変数に格納する

Question

私はタイスクリプトファイルを持ち、kendoDatePickerを使用しています。私が日付を選択してアラート（this.selectedDate1）をすると、私は選択した日付を取得することができます。 しかし、ボタンをクリックすると、以下のgetInvoices（）メソッドが呼び出され、selectedDate1の値を取得しようとしました。常に定義されていません。 ここで何が間違っていますか？

 selectedDate1: Date; 
     selectedDate2: Date; 

     createDatePicker = function (controlNum: number) { 
        var datePicker = $("#datePicker" + controlNum).kendoDatePicker(); 
        datePicker.data("kendoDatePicker").destroy(); 
        datePicker.empty(); 

        var datePickerControl = $("#datePicker" + controlNum).kendoDatePicker({    
         change: function (e) { 
          if (controlNum === 1) { 
           this.selectedDate1 = $("#datePicker" + controlNum).data("kendoDatePicker").value(); 
           alert(this.selectedDate1); 
          } else { 
           this.selectedDate2 = $("#datePicker" + controlNum).data("kendoDatePicker").value(); 
           alert(this.selectedDate2); 
          }      
         }    
        }).data("kendoDatePicker");    
       } 


     getInvoices() { 
       alert(this.selectedDate1); 
       // returns undefined all the time. 
       } 

Answer 1

まず修正し、説明...

change: (e) => { // <-- 
    if (controlNum === 1) { 
     this.selectedDate1 = $("#datePicker" + controlNum).data("kendoDatePicker").value(); 
     alert(this.selectedDate1); 
    } else { 
     this.selectedDate2 = $("#datePicker" + controlNum).data("kendoDatePicker").value(); 
     alert(this.selectedDate2); 
    }      
}   

あなたがイベントで作業するたびに、this変数のスコープを失います。 selectedData1を入れていた（そしてあなたが警告していた）thisは実際にあなたのクラスではありませんでした。

矢印関数を使用すると、イベントコールバック内のクラスをターゲットにする中間変数が導入されます。