Угловой 2 Компонент - привязка модели не работает

Question

Я пытаюсь создать обертку для pickatime (pickadate) в угловом 2, но modeldata не меняется, когда я выбираю время.

Моя обертка-компонент выглядит следующим образом:

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!

Update Я пытался построить простой компонент без каких-либо плагинов, как 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 от внешнего компонента вводится правильно. Когда я меняю значение вручную и нажимаю save на внешнем компоненте, свойство myzeit имеет старое значение.

Answer 1

Вы должны использовать [(ngModel)] с полем ввода, чтобы иметь возможность двусторонней привязки, разрешенную на этом входе.

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

Должно быть

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

Answer 2

Это, вероятно, не является причиной вашей проблемы, но использовать () => { } вместо function() {}, то вам не нужно var self = this, просто использовать this.xxx

setTimeout() должен исправить вашу проблему:

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