Двухстороннее связывание не работает в 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>