Question

我正在尝试使用angular2中的html5输入类型编号实现时间选择器，如下所示：

<input type="number" [(ngModel)]="hour" (change)="checkHours();" name="one" min="1" max="12">
<input type="number" [(ngModel)]="minutes" (change)="checkMinutes();" name="two" min="0" max="59">

在更改值时（手动输入或使用输入类型中的向上/向下箭头），应触发一个函数，以便我可以在打字稿中对其进行修改，以便将以小时/分钟为单位的单位时间显示为两个位数的。为：

如果我选择/输入值作为小时5和分钟3，则在函数调用后，它应在小时输入中显示为“ 05”，在分钟输入框中显示为“ 03”。但是似乎存在一些问题，例如：this.hours中没有更改的值。我是否可以将数字类型作为字符串进行操作？请帮忙。提前致谢。任何其他解决方案也都欢迎。

public checkHours(){
  if (this.hours <= 9){
    this.hours = "0" + this.hours;
  }
}

public checkMinutes(){
  if (this.minutes <= 9){
    this.minutes = "0" + this.minutes;
  }
}

Answer 1

最快的是这个

function twoDigits(value) {
  return ('0'  + value).slice(-2);
}

console.log(twoDigits('1'));
console.log(twoDigits('01'));

您的情况：

twoDigits(value: number) {
  value = ('0' + value).slice(-2);
}

要调用它：

this.twoDigits(this.hours);

Answer 2

问题是因为您将小时定义为数字，但是在函数中却给它分配了一个字符串值，这是不正确的：

您可以尝试：

public checkHours(){
  let hours=''
  if (this.hours <= 9){
    hours = "0" + this.hours;
  }
  console.log(hours)
}

public checkMinutes(){
  let minutes='';
  if (this.minutes <= 9){
    minutes = "0" + this.minutes;
  }
    console.log(minutes)
}

html：

<input type="number" [(ngModel)]="hours" (change)="checkHours();" name="one" min="1" max="12">
<input type="number" [(ngModel)]="minutes" (change)="checkMinutes();" name="two" min="0" max="59">

工作demo

输入类型编号自定义角度2

2 个答案: