0

私のプロジェクトでは、jQueryプラグイン(datepickerとiCheck)を使用しており、おそらくより多くのプラグインを使用しています。私は角からのjqueryプラグインメソッドを呼び出すことができましたが、角度のある2ウェイデータバインディングはjQueryプラグインを使用する要素では機能しません。2ウェイバインディングが角2で動作していない

私は私のコンポーネントtypescriptファイルに上記のチェックボックスのための

<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変数の値が変更されないのはなぜですか?

答えて

0

は2ウェイバインディングを削除して、試してみてください。

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

は試してみましたが、それでも私のために働いていませんでした。 –

+0

私は答えを編集しました。新しい方法はあなたのために働くかもしれません。 – Dan

関連する問題