如何在Ancular Material Mat扫描范围内设置不同的标签以启动和最终值？ 我正在使用具有范围选择的角材料垫子（启动和末端拇指）。我想格式化标签，以便： 开始拇指显示：“最小：（value）” 末端拇指显示...

Question

  <mat-slider class="ai-basic-slider"
              id="inserted-media-range"
              min="0" max="51" step="1"
              discrete showTickMarks
              [displayWith]="formatSlideRangeLabel">
    <input matSliderStartThumb>
    <input matSliderEndThumb>
  </mat-slider>

  public formatSlideRangeLabel(value: number): string {
    if (value == 51) {
      return 'Max: ∞';
    } else {
      return 'Max: ' + value;
    }

    return `${value}`;
  }

首先将min和max

值绑定到局部属性。

Answer 1

然后您需要做的就是检查displaywith的值是否等于使用

min

的值，如果值等于值，则是您要处理的最小值。

ngModel

要访问

public formatSlideRangeLabel(value: number): string {
  if (value === this.min()) {
    // then it is max
    return 'Min: ' + value;
  } else {
    if (value == 51) {
      return 'Max: ∞';
    } else {
      return 'Max: ' + value;
    }
  }
}

，您必须确保在组件上下文中执行该函数，为了实现此目的，我们使用

this.min()

.

。

Html：

.bind(this)TS：

<mat-slider
  class="ai-basic-slider"
  id="inserted-media-range"
  min="0"
  max="51"
  step="1"
  discrete
  showTickMarks
  [displayWith]="formatSlideRangeLabel.bind(this)"
>
  <input matSliderStartThumb [(ngModel)]="min" />
  <input matSliderEndThumb [(ngModel)]="max" />
</mat-slider>

stackblitzdemo