Question

我的Angular 2 Material应用程序中有一个表单，其中包括一个建模为具有最大值，最小值和步长的滑块的价格字段：

  <md-input type="range"
      [min]="minimumPrice"
      [max]="maximumPrice"
      [step]="priceTick"
      class="slider">

价格以美分为模型（即没有分数），但前端应以美元显示价格，例如12345的价格美分最高为50000美分，最低为0美分，步数为5美分现在看起来像这样：

                12345
       0 |---------*---------------| 50000

              in steps of 5

但应以美元：

的形式显示

                $123.45
   $0.00 |---------*---------------| $500.00

              in steps of $0.05

表单和滑块在显示美分时有效，但如何让滑块按美元中的值正确显示并显示？

后端价格模型是long，它作为long值发送到前端（即没有分数），但我愿意改变我发送的内容如果需要，前端可以简化处理。因此，一般的问题是：让md-input正确显示美元并且行为正确的最简单方法是什么？

Answer 1

如果你想避免模型绑定，我会冒险使用CurrencyPipe结合滑块的模板变量来冒险：

Angular2 Material

布局可能不正确，但这是它的要点，你可以用这个Plunker http://plnkr.co/edit/Fj3hDJmwRD4SvzlKu6R6?p=preview

瞎逛

这是<md-input type="range" name="slider" [min]="minimumPrice" [max]="maximumPrice" [step]="priceTick" #slider class="slider" [placeholder]="slider.value | customCurrency"> <span md-prefix>{{slider.min | customCurrency}}</span> <span md-suffix>{{slider.max | customCurrency}}</span> </md-input>的一个非常简单的自定义扩展，用于删除/ 100并设置格式：

自定义-currency.pipe.ts

CurrencyPipe

<强> module.ts

import {Pipe, PipeTransform} from '@angular/core'; import {CurrencyPipe} from '@angular/common'; @Pipe({ name: "customCurrency" }) export class CustomCurrencyPipe implements PipeTransform { constructor(private currencyPipe: CurrencyPipe) {} transform(value: any): string { return this.currencyPipe.transform(value / 100, 'USD', true); } }

处理Angular 2材质滑块

1 个答案: