Angular 2 组件 - 模型绑定不工作

Question

我试图在 angular 2 中为 pickatime (pickadate) 构建一个包装器，但是当我 select 一次时，模型数据没有改变。

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

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>

点击工作正常，选择器打开，我可以在输入中看到我的 selected 值。当我点击保存按钮读取给定模型属性 "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-属性具有旧值。

Answer 1

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

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

应该是

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

Answer 2

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

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

onClick() {
    var picker = this.picker.pickatime('picker');
    picker.open().on({
        set: (thingSet) => {
            setTimeout(() => {
              self.zeit = this.get();
            });
        }
    });
}

Angular 2 组件 - 模型绑定不工作

Angular 2 Component - modelbinding is not working

typescript

angular

pickadate