角度2：自舉開關不改變變量的值

我在我的Angular 2應用程序中使用自舉開關複選框。當你點擊這個開關時，我希望我的課程中的LightNeeded變量的值隨之改變。我有以下代碼：角度2：自舉開關不改變變量的值

HTML：

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

打字稿文件：

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

當開關是真實的，它成功地記錄真實的控制檯。當它爲假時，它將成功地記錄到控制檯。但是，它永遠不會更改我的LightNeeded變量的值。

當我懸停的this.LightNeededthis，我得到以下警告：

可疑「這個」用法：在目前情況下「這」指的是本地功能，不含有類。

我怎樣才能得到this工作我打算的方式，改變我的LightNeeded變量的值？我願意採取其他有意義的方法。我嘗試將[attr.checked]="LightNeeded? true : null"添加到我的輸入中，但它不起作用。

編輯：

雙向從加入[(ngModel)]="LightNeeded"結合工作時，這是一個簡單的複選框，但由於某種原因，自舉開關插件打破了雙向綁定。其他插件如JQuery Inputmask和JQuery UI Datepicker也會打破雙向綁定。

來源

2016-11-09 Brett

該值將通過元素的雙向綁定而改變 –

應該是，但是不是。它工作時，他們是簡單的複選框，但只要我實施了自舉開關雙向綁定打破。 – Brett

[TypeScript和此上下文檢測]的可能重複（http://stackoverflow.com/questions/33791128/typescript-and-this-context-detection） – Fiddles

您的事件處理函數更改了this的上下文。相反，您應該使用箭頭函數，它不會更改上下文/綁定。見https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

例子：

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

來源

2016-11-10 00:04:07 Fiddles

也許是遲，但我爲angular2 +叫jw-boostrap-switch-ng2如果有人想看看一個組成部分。

更好的解決方案來實現一個組件，因爲你不必擔心JQUERY。

來源

2017-07-11 14:38:55

這都是關於函數範圍的。 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-31 21:50:54

角度2：自舉開關不改變變量的值

回答

相關問題