Question

在我的项目中，我使用了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我无法获得检查状态。应该怎么做呢。

为什么记住MeChecked变量值即使在什么时候也不会改变选中复选框？

Answer 1

删除双向绑定并尝试：

<input type="checkbox" id="rememberMe" #rememberMe 
       [checked]="rememberMeChecked" 
       (change)="rememberMeChecked = $event.target.checked"/>Remember Me</label>

双向绑定在Angular 2中不起作用

1 个答案: