问题
I'm trying to build a wrapper for pickatime (pickadate) in angular 2 but the modeldata is not changing when I select a time.
My wrapper-component looks like this:
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();
}
});
}
}
I am using this component in a template like this:
<mundo-timepicker [(zeit)]="myzeit"></mundo-timepicker>
The click works fine, the picker opens and I can see my selected value in the input. When I hit a save button to read the given model property "myzeit", I get the old value.
I'm not sure if this is even the right way to build a wrapper for a plugin. Is it?
Thx!
Update I've tried to build a simpler component without any plugin like pickadate, and it is also not working :/
import {Component, Input} from 'angular2/core';
@Component({
selector: 'mundo-input',
template: `
<input class="form-control" [(ngModel)]="zeit" />
`
})
export class MundoInputComponent {
@Input() zeit: string;
}
Again I am consuming this component like this:
<mundo-input [(zeit)]="myzeit"></mundo-input>
The myzeit-property from the outer component gets injected correctly. When I change the value by hand and press save on the outside component, the myzeit-property has the old value.
回答1:
You should use [(ngModel)]
with input box to have two way binding enabled over that input.
<input class="form-control" (click)="onClick()" [(value)]="zeit" />
Should be
<input class="form-control" (click)="onClick()" [(ngModel)]="zeit" />
回答2:
That's probably not the cause of your issue but use () => { }
instead of function () {}
, then you don't need var self = this
, just use this.xxx
setTimeout()
should fix your issue though:
onClick() {
var picker = this.picker.pickatime('picker');
picker.open().on({
set: (thingSet) => {
setTimeout(() => {
self.zeit = this.get();
});
}
});
}
来源:https://stackoverflow.com/questions/36320605/angular-2-component-modelbinding-is-not-working