0

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 に古い値が含まれています。

4

2 に答える 2

1

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

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

する必要があります

 <input class="form-control" (click)="onClick()" [(ngModel)]="zeit"  />
于 2016-03-30T22:09:55.860 に答える