Question

我试图在角度2中为pickatime（pickadate）构建一个包装器，但是当我选择一个时间时，modeldata没有改变。

我的包装器组件如下所示：

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>

点击工作正常，选择器打开，我可以在输入中看到我选择的值。当我点击一个保存按钮来读取给定的模型属性＆＃34; myzeit＆＃34;时，我得到旧值。

我不确定这是否是构建插件包装器的正确方法。是吗？

THX！

更新我试图构建一个更简单的组件，没有任何插件，如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属性被正确注入。当我手动更改值并按外部组件上的save时，myzeit-property具有旧值。

Answer 1

您应该在输入框中使用[(ngModel)]，以便在该输入上启用双向绑定。

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

应该是

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

Answer 2

这可能不是您的问题的原因，但使用<frameset rows="100%"> <frameset cols="100%"> <frame src="http://www.domain.com/page-i-want-to-display" frameborder="0" scrolling="yes"> </frameset> </frameset>代替() => { }，那么您不需要function () {}，只需使用var self = this }

this.xxx应该解决您的问题：

setTimeout()

Angular 2 Component - 模型绑定不起作用

2 个答案: