角2组件 - modelbinding不工作 [英] Angular 2 Component - modelbinding is not working

问题描述

我试图建立角2 pickatime（pickadate）的包装，但是当我选择一个时间modeldata没有改变。

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>

的点击做工精细，拾取器打开，我可以在输入看到我选择的值。当我打保存按钮阅读给定的模型属性myzeit，我得到的旧值。

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！

更新
我试图建立一个简单的组件，而不会像pickadate任何插件，而且它也没有工作：/

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>

从外部组件的myzeit属性被正确注射。当我手工修改和preSS值保存在外部元件上，在myzeit属性有旧值。

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.

推荐答案

您应该使用 [（ngModel）] 的输入框有两个方式绑定在该输入启用

You should use [(ngModel)] with input box to have two way binding enabled over that input.

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

应

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

这篇关于角2组件 - modelbinding不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！