角2コンポーネント - モデル結合が機能していません

Question

角度2でpickatime（pickadate）のラッパーを作成しようとしていますが、時間を選択するとモデルデータが変更されません。

私のラッパーコンポーネントは次のようになります。

import {Component, AfterContentInit, Input, EventEmitter, ElementRef} from 'angular2/core'; 

@Component({ 
    selector: 'mundo-timepicker', 
    template: ` 
     <input class="form-control" (click)="onClick()" [(value)]="zeit" /> 
    ` 
}) 
export class MundoTimepickerComponent implements AfterContentInit { 
    @Input() zeit: any; 

    pickerConfig: Pickadate.TimeOptions = { 
     format: 'HH:i', 
     // editable: true, 
     interval: 30, 

    } 
    picker: any; 
    constructor(private el: ElementRef) { 
    } 

    ngAfterContentInit() { 
     this.picker = jQuery(this.el.nativeElement.children[0]).pickatime(this.pickerConfig);   
    } 
    onClick() { 
     var picker = this.picker.pickatime('picker'); 
     var self = this; 
     picker.open().on({ 
      set: function (thingSet) { 
       self.zeit = this.get(); 
      } 
     }); 
    } 
} 

私はこのようなテンプレートでこのコンポーネントを使用しています：クリックが正常に動作します

<mundo-timepicker [(zeit)]="myzeit"></mundo-timepicker> 

、ピッカーが開き、私は自分を見ることができます入力で選択された値。特定のモデルプロパティ "myzeit"を読み込むために保存ボタンを押すと、私は古い値を取得します。

これがプラグインのラッパーを構築する正しい方法であるかどうかはわかりません。それは...ですか？

Thx！

更新 私はpickadateのような任意のプラグインなしでシンプルなコンポーネントを構築しようとしました、そしてまた、機能していません。

：/

import {Component, Input} from 'angular2/core'; 

@Component({ 
    selector: 'mundo-input', 
    template: ` 
     <input class="form-control" [(ngModel)]="zeit" /> 
    ` 
}) 
export class MundoInputComponent { 
    @Input() zeit: string;  
} 

が再び私はこのような、このコンポーネントを消費しています

<mundo-input [(zeit)]="myzeit"></mundo-input> 

外部コンポーネントのmyzeit-propertyが正しく注入されます。値を手動で変更して外部コンポーネントのsaveを押すと、myzeit-propertyは古い値を持ちます。

Answer 1

入力ボックスに[(ngModel)]を使用して、その入力に対して双方向バインディングを有効にする必要があります。

<input class="form-control" (click)="onClick()" [(value)]="zeit" /> 

は、おそらくあなたの問題の原因ではありません

<input class="form-control" (click)="onClick()" [(ngModel)]="zeit" /> 

Answer 2

ことが、その後、あなたがthis.xxx

setTimeout()を使用するだけで、var self = thisを必要としない、() => { }代わりのfunction() {}を使用すべきはず問題を解決してください：

onClick() { 
    var picker = this.picker.pickatime('picker'); 
    picker.open().on({ 
     set: (thingSet) => { 
      setTimeout(() => { 
       self.zeit = this.get(); 
      }); 
     } 
    }); 
}