角2：変数の値を変更しないブートストラップスイッチ

Question

私はAngular 2アプリケーションのチェックボックスにブートストラップスイッチを使用しています。スイッチをクリックすると、私のクラスの私のLightNeeded変数の値を変更する必要があります。

HTML：：

<input class="bootstrap-switch light-needed" name="LightNeeded" type="checkbox" [(ngModel)]="LightNeeded"> 

typescriptファイル：

LightNeeded: boolean; 

ngOnInit(): void {   
    // Invoke bootstrap switches 
    $('.bootstrap-switch').bootstrapSwitch({ 
     onText: "Yes", 
     offText: "No" 
    }); 
    this.changeBootstrapSwitchValues(); 
} 

changeBootstrapSwitchValues() { 
    $('.light-needed').on('switchChange.bootstrapSwitch', function (event:any, state:any) { 
     if (state) { 
      console.log('true'); 
      this.LightNeeded= true; 
     } else { 
      console.log('false'); 
      this.LightNeeded= false; 
     }; 
    }); 
} 

スイッチがtrueの場合、それは成功し、コンソールにログインする本当の私は、次のコードを持っています。 falseの場合、コンソールにfalseを正常に記録します。しかし、それは私のLightNeeded変数の値を決して変更しません。

私はthis.LightNeededのthisの上に置くと、私は次の警告を得る：

が疑わしい「この」使用方法：現在のコンテキスト内に「これは」ローカル 機能に、いない含まれているクラスを指します。

どのように私は私が意図していますように動作し、私のLightNeeded変数の値を変更するthisを得ることができますか？私は他のアプローチをとることにもオープンしています。入力に[attr.checked]="LightNeeded? true : null"を追加しようとしましたが、機能しませんでした。

EDIT：

、それは簡単なチェックボックスだったとき[(ngModel)]="LightNeeded"を追加することから、結合双方向で働いたが、何らかの理由でブートストラップスイッチプラグインは、双方向の結合が壊れます。 JQuery InputmaskやJQuery UI Datepickerなどの他のプラグインも、双方向バインディングを破ります。

Answer 1

イベントハンドラ関数は、コンテキストをthisに変更します。代わりに、コンテキスト/バインディングを変更しない矢印関数を使用する必要があります。

$('.light-needed').on('switchChange.bootstrapSwitch', (event:any, state:any) => { 
     if (state) { 
      console.log('true'); 
      this.LightNeeded= true; 
     } else { 
      console.log('false'); 
      this.LightNeeded= false; 
     }; 
    }); 

Answer 2

たぶん後半にあるが、私は誰もがそれをチェックアウトしたい場合はjw-boostrap-switch-ng2と呼ばangular2 +のためのコンポーネントを作った：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

例を参照してください。

JQUERYについて心配する必要がないため、コンポーネントを実装するためのより良いソリューションです。

Answer 3

すべての機能の有効範囲についてです。 changeBootstrapSwitchValues()内のthisキーワードは、JQueryオブジェクトを参照しています。これは次の方法で修正できます。

changeBootstrapSwitchValues() { 
let self = this; 
    $('.light-needed').on('switchChange.bootstrapSwitch', function (event:any, state:any) { 
     if (state) { 
      console.log('true'); 
      //this.LightNeeded= true; 
      self.LightNeeded= true; 
     } else { 
      console.log('false'); 
      //this.LightNeeded= false; 
      self.LightNeeded= false; 
     }; 
    }); 
}