在 Angular 2 Material 滑块中处理美元

Question

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

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

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

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

              in steps of 5

但应该以美元显示：

                3.45
   [=14=].00 |---------*---------------| 0.00

              in steps of [=14=].05

表单和滑块在显示美分时有效，但我怎样才能让滑块正常运行并正确显示美元中的值？

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

Answer 1

在不完全熟悉 Angular2 Material 的情况下，如果您要避开模型绑定，我会冒险将 CurrencyPipe 与滑块的模板变量结合使用：

<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>

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

这是 CurrencyPipe 的一个非常简单的自定义扩展，用于删除 /100 并设置格式：

自定义-currency.pipe.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);
    }
}

module.ts

import {CustomCurrencyPipe} from "[location]/custom-currency.pipe";
import {CurrencyPipe} from "@angular/common";

@NgModule({<...>, declarations: [<...>, CustomCurrencyPipe], providers: [<...>, CurrencyPipe]})

在 Angular 2 Material 滑块中处理美元

Handling dollars in Angular 2 Material Slider

angular

typescript

angular2-material