Question

以下是我的角度组件模板中无效的部分：

<p-spinner id="yzDistance"
                           [min]="aRenderState.clipping.planes[0].min"
                           [max]="aRenderState.clipping.planes[0].max"
                           [step]="inputStep"
                           [(ngModel)]="yzDistance" (onChange)="moveClip(0)">
                </p-spinner>

                <input type="range" class="slider" type="range" name="yzDistance"
                       [min]="aRenderState.clipping.planes[0].min"
                       [max]="aRenderState.clipping.planes[0].max"
                       [step]="inputStep"
                       [ngModel]="yzDistance | decimalsPipe"
                       (ngModelChange)="yzDistance=$event"
                       (input)="moveClip(0)">

微调器工作正常，显示正确格式化的值，例如2.009 4.765 -1.649等（3位小数）。当我移动也具有0.001步长的滑块时，微调器会更新但显示带有千位分隔符的小数，例如3.987,432 -1.34,092等我试过用以下名为decimalsPipe的自定义管道来解决问题：

@Pipe({name: 'decimalsPipe'})
export class DecimalsPipe implements PipeTransform {
    transform(value) {

        value.toLocaleString('en-US', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 3
        });
    }
}


@Component({
    selector: 'myComponent',
    templateUrl: './myComponent.html',
    styleUrls: ['./myComponent.css']
})
export class myComponent { ...

它仍然显示奇怪的十进制格式，并且不会引发错误。你能帮帮我解决这个问题吗？

谢谢Dino

Answer 1

你不在transform中返回任何值，尝试在方法transform中返回格式化的值：

transform(value) {

       return value.toLocaleString('en-US', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 3
        });
    }

Answer 2

我已经接受了Med_Ali_Rachid的答案，即使它没有成功，因为他的答案指向了正确的方向。问题是微调器没有格式化管道返回的值。

我的解决方案是隐藏微调器的输入区域，只留下向上和向下箭头按钮可见。然后我添加了一个作为输入样式的段落来显示正确的值。

            <p>
                {{yzDistance | decimalsPipe}}
            </p>

            <p-spinner id="yzDistance"
                       [min]="aRenderState.clipping.planes[0].min"
                       [max]="aRenderState.clipping.planes[0].max"
                       [step]="inputStep"
                       [(ngModel)]="yzDistance" (onChange)="moveClip(0)">
            </p-spinner>

角度2微调器，滑块：自定义管道不工作

2 个答案: