0

我正在尝试在角度 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-property 被正确注入。当我手动更改值并在外部组件上按保存时，myzeit-property 具有旧值。

4

2 回答 2

1

您应该使用[(ngModel)]with 输入框在该输入上启用两种方式绑定。

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

应该

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

那可能不是您的问题的原因，而是使用() => { }而不是function () {}，那么您不需要var self = this，只需使用this.xxx

setTimeout()应该可以解决您的问题：

onClick() {
    var picker = this.picker.pickatime('picker');
    picker.open().on({
        set: (thingSet) => {
            setTimeout(() => {
              self.zeit = this.get();
            });
        }
    });
}
于 2016-03-31T15:50:15.397 回答