角度 4/6 材料滑块，24 小时时间刻度滑块

Question

我正在使用 Angular Material 创建一个滑块。这个滑块是 24 小时的，我想在侧面显示滑块的值。 以下事情正在发挥作用：

1. 使用(change) 事件获取更改时滑块的值 .html

<mat-slider style="width:50%" thumbLabel name="range1" #timeSlider type="range" tickInterval="1" step="0.5" min="1" max="24"
                (change)="onChangeRange(timeSlider.value)">
</mat-slider>

.ts

onChangeRange(rangeValue: any) {
  console.log(rangeValue);
  this.showTime = rangeValue;
}

问题：

1. 我想以时间HH:mm 的形式显示选择的值，下面也是我尝试使用以时间格式转换type: number 值但没有任何效果的插值

<button mat-raised-button class="displayTimeBtn">
  <span>
    {{showTime}}
    <!-- {{showTime | date:"shortTime"}} -->
  </span>
</button>

1. 我也想改变“拇指标签”的显示

现在的样子：

Answer 1

你只需要使用 mat-slider 的displayWith 属性来格式化拇指标签。因此，将您的模板代码更新为：

<mat-slider thumbLabel [displayWith]="formatLabel" tickInterval="1" step="0.5"
  min="1" max="24" (change)="onChangeRange($event)">
</mat-slider>

formatLabel 方法可以在哪里：

 formatLabel(value: number | null) {
    if (!value) {
      return 0;
    }

    let decimalPart = +value.toString().replace(/^[^\.]+/,'0');
    let mm = decimalPart * 60;
    var mmPart = mm.toString().length == 1 ? mm.toString() + "0" : mm.toString();

    if (value >= 0) {
      let valueStr = value.toFixed(2);
      let strArr = valueStr.split(".");
      if(strArr[0].length == 1) {
        strArr[0] = "0" + strArr[0];
      }
      var hhPart = strArr[0];
    }

    return hhPart + ":" + mmPart;
 }

现在您可以使用任何格式化或非格式化值作为模型值。

Example