Двухстороннее связывание не работает в Angular 2

В моем проекте я использовал плагины jQuery (datepicker и iCheck) и, вероятно, буду использовать больше плагинов. Мне удалось вызвать методы плагина jquery из angular, но угловое двухстороннее связывание данных не работает с элементами, использующими плагин 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 не изменяется даже при установленном флажке?

1 ответ

Удалите 2-стороннюю привязку и попробуйте:

<input type="checkbox" id="rememberMe" #rememberMe 
       [checked]="rememberMeChecked" 
       (change)="rememberMeChecked = $event.target.checked"/>Remember Me</label>
Другие вопросы по тегам