角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屋!