Angular 2: Bootstrap 开关不改变变量的值

Question

我在 Angular 2 应用程序中为复选框使用引导开关。当您单击开关时，我希望 class 中的 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;
        };
    });
}

当开关为真时，它成功地将真记录到控制台。当它为 false 时，它成功地将 false 记录到控制台。但是，它永远不会改变我的 LightNeeded 变量的值。

当我将鼠标悬停在 this.LightNeeded 的 this 上时，我收到以下警告：

suspicious 'this' usage: in current context 'this' refers to a local function, not to a containing class.

如何让 this 以我想要的方式工作并更改我的 LightNeeded 变量的值？我愿意采取其他也有意义的方法。我尝试将 [attr.checked]="LightNeeded? true : null" 添加到我的输入中，但没有成功。

编辑：

添加 [(ngModel)]="LightNeeded" 的双向绑定在它是一个简单的复选框时有效，但由于某种原因 bootstrap 开关插件破坏了双向绑定。 JQuery Inputmask 和 JQuery UI Datepicker 等其他插件也会破坏双向绑定。

Answer 1

您的事件处理函数更改了 this 的上下文。相反，您应该使用箭头函数，它不会改变 context/binding。参见 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;
        };
    });

Answer 2

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

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

Answer 3

这都是关于函数作用域的。 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;
        };
    });
}

Angular 2: Bootstrap 开关不改变变量的值

Angular 2: Bootstrap Switch not changing value of variable

jquery

typescript

bootstrap-switch

angular