0

在我的项目中，我使用了 jQuery 插件（datepicker 和 iCheck），并且可能会使用更多的插件。我已经设法从角度调用 jquery 插件方法，但角度 2 方式数据绑定不适用于使用 jQuery 插件的元素。

例如，我的模板中有复选框

<div class="checkbox icheck">
   <label >
     <input type="checkbox" id="rememberMe" #rememberMe  [(ngModel)]="rememberMeChecked"/> Remember Me
   </label>
</div>

对于我的组件打字稿文件中的上述复选框

import { Component, ViewChild, ElementRef, AfterViewInit, Input } from '@angular/core';

declare var jQuery: any;

@Component({
selector: 'login',
templateUrl: '/template/login.html'
})

export class LoginComponent implements AfterViewInit  {
@Input()
@ViewChild('rememberMe') input: ElementRef;
rememberMeChecked: boolean;
ngAfterViewInit() {
   //Commenting iCheck method rusults in proper two-way data binding
    jQuery(this.input.nativeElement).iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional,
    });
    // jQuery(this.input.nativeElement).on('ifChecked', function(){
    //     LoginComponent.rememberMeChecked = true;
    // })
    // jQuery(this.input.nativeElement).on('ifUnchecked', function(){
    //     this.remember = false;
    // })
  }
}

评论 iCheck 方法会导致正确的数据绑定，但由于 iCheck 我无法获得检查状态。为此应该怎么做。

  为什么即使选中复选框，rememberMeChecked 变量值也不会改变？

4

1 回答 1

0

删除 2-way 绑定并尝试：

<input type="checkbox" id="rememberMe" #rememberMe 
       [checked]="rememberMeChecked" 
       (change)="rememberMeChecked = $event.target.checked"/>Remember Me</label>
于 2017-03-23T11:14:56.350 回答