0

我在 Angular 2 应用程序中为复选框使用引导开关。当您单击开关时，我希望LightNeeded我的类中变量的值随之改变。我有以下代码：

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

当 switch 为 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

2

您的事件处理函数更改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-10T00:04:07.440 回答
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 回答
0

也许为时已晚，但如果有人想检查一下，我为 angular2+ 制作了一个名为 jw-boostrap-switch-ng2的组件。

是实现组件的更好解决方案，因为您不必担心 JQUERY。

于 2017-07-11T14:38:55.193 回答