0

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 の場合、true がコンソールに正常に記録されます。false の場合、false がコンソールに正常に記録されます。ただし、LightNeeded変数の値が変更されることはありません。

にカーソルを合わせるthisとthis.LightNeeded、次の警告が表示されます。

疑わしい 'this' の使用法: 現在のコンテキストでは、'this' は含まれているクラスではなく、ローカル関数を参照しています。

this意図したとおりに作業を開始し、LightNeeded変数の値を変更するにはどうすればよいですか? 私は、理にかなっている他のアプローチを取ることにもオープンです。入力に追加しようとし[attr.checked]="LightNeeded? true : null"ましたが、うまくいきませんでした。

編集：

単純なチェックボックスの場合は、追加による双方向バインディングが[(ngModel)]="LightNeeded"機能していましたが、何らかの理由で、ブートストラップ スイッチ プラグインがその双方向バインディングを壊してしまいました。JQuery Inputmask や JQuery UI Datepicker などの他のプラグインも双方向バインディングを壊します。

4

3 に答える 3

1

それはすべて関数のスコープに関するものです。this関数内のキーワードchangeBootstrapSwitchValues()は、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;
        };
    });
}
于 2017-12-31T21:50:54.610 に答える