0

我在 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正确显示美元和行为正确的最简单方法是什么？

4

1 回答 1

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 并设置格式：

自定义货币.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);
    }
}

模块.ts

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

@NgModule({<...>, declarations: [<...>, CustomCurrencyPipe], providers: [<...>, CurrencyPipe]})
于 2016-11-28T18:35:11.280 回答