angular 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」を読み取るために保存ボタンを押すと、古い値が取得されます。
これがプラグインのラッパーを作成する正しい方法であるかどうかはわかりません。それは...ですか?
どうも!
更新 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 プロパティが正しく挿入されます。手動で値を変更し、外側のコンポーネントで保存を押すと、myzeit-property に古い値が含まれています。