Angular2将数字绑定到输入时间答案

【问题标题】：Angular2 bind number to input timeAngular2将数字绑定到输入时间
【发布时间】：2017-03-18 14:33:31
【问题描述】：

我正在寻找一种将我的数字属性绑定到时间输入的方法。我想这样做是因为我的模型属性只能是类型号。我想通过绑定将时间值转换为秒。我试过这段代码：

<input type="time" step="1" [ngModel]="value.value | timeToNumber" (ngModelChange)="value.value = $event">

我的 timeToNumber 管道将字符串“HH:mm:ss”转换为秒。但它不起作用，因为输入不能接受数字类型。我怎样才能做到这一点？

【问题讨论】：

标签： angular typescript time binding

【解决方案1】：

我认为你不能这样做，因为这是一种无限循环的调用更改输入元素后的 ngModelChange，这将导致调用管道“timeToNumber”，这将导致再次调用 ngModelChange ..

您可以通过再保存一个变量来解决它：例如“value.valueForm”，它将保存您的管道版本值“value.value”。

例如：

            <input type="time" step="1" placeholder="time in seconds.." name="myTime" #iTime #myTime="ngModel"
                    [ngModel]="value.valueForm" 
                    (ngModelChange)="value.valueForm=onChange($event, iTime)" />


onChangeCash(eventStr: string, eRef): string {
    var res = this.getNumberOnChange(eventStr, eRef); // gets current value of element using eRef. Pipe it and return new piped value as res.
    this.value.value = this.getNumberOfStr(res); // gets new piped value as res and convert it to Model value you need to save.
    return res;
}

很抱歉没有 getNumberOnChange()、getNumberOfStr() 的示例。

【讨论】：