Angular 2 Component - Modelbinding funktioniert nicht

Question

Ich versuche, einen Wrapper für Pickatime (Pickadate) in Winkel 2 zu erstellen, aber die Modelldaten ändern sich nicht, wenn ich eine Zeit auswählen.

Meine Wrapper-Komponente sieht wie folgt aus:

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(); 
      } 
     }); 
    } 
} 

ich diese Komponente wie dies in einer Vorlage verwende:

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

Der Klick funktioniert gut, öffnet sich der Kommissionierer und ich kann meine sehen gewählter Wert in der Eingabe. Wenn ich eine Speicherschaltfläche drücke, um die angegebene Modelleigenschaft "myzeit" zu lesen, erhalte ich den alten Wert.

Ich bin mir nicht sicher, ob dies sogar der richtige Weg ist, einen Wrapper für ein Plugin zu erstellen. Ist es?

Thx!

aktualisieren Ich habe versucht, eine einfachere Komponente ohne Plugin wie pickadate zu bauen, und es funktioniert auch nicht:/

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

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

Auch ich diese Komponente wie dies am raubend:

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

Die Myzeit-Eigenschaft von der äußeren Komponente wird korrekt injiziert. Wenn ich den Wert manuell ändere und auf die äußere Komponente speichere, hat die myzeit-Eigenschaft den alten Wert.

Answer 1

Sie sollten [(ngModel)] mit Eingabefeld verwenden, um eine Zwei-Wege-Bindung über diesen Eingang aktiviert zu haben.

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

Sollte

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

Answer 2

sein, das ist wahrscheinlich nicht die Ursache für das Problem, sondern verwenden () => { } statt function() {}, dann brauchen Sie nicht var self = this, benutzen Sie einfach this.xxx

setTimeout() sollte behebe dein Problem aber:

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