Работа с долларами в Angular 2 Material Slider

У меня есть форма в моем приложении 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 правильно отображать доллары и вести себя правильно?


typescript angular angular2-material
person Jan Nielsen    schedule 28.11.2016    source источник
comment
Как вы отображаете значения в настоящее время?   -  person silentsod    schedule 28.11.2016
comment
В настоящее время значения отображаются в центах, @silentsod — я обновлю вопрос, чтобы показать это.   -  person Jan Nielsen    schedule 28.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

Не будучи полностью знакомым с 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>

Макет, вероятно, неправильный, но в этом его суть, и вы можете возиться с этим плункером http://plnkr.co/edit/Fj3hDJmwRD4SvzlKu6R6?p=preview

Вот очень простое пользовательское расширение CurrencyPipe для удаления /100 и установки форматирования:

custom-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]})
person silentsod    schedule 28.11.2016
comment
+1 Это очень близко к тому, что я хотел бы, @silentsod - спасибо! Поскольку у меня есть этот тип кода во многих местах, я бы хотел, чтобы различные /100 были спрятаны в .ts файлах — как это сделать при использовании CurrencyPipe? - person Jan Nielsen; 28.11.2016
comment
Может быть, реализовать собственное расширение CurrencyPipe и использовать его вместо стандартного. Я включу это в свой ответ. - person silentsod; 28.11.2016