Диапазон формата ng2-nouislider при загрузке angular 9 - PullRequest
0 голосов
/ 06 августа 2020

https://stackblitz.com/edit/ng2-nouislider-with-form-nstwcr

Выше ссылка на stackblitz с некоторым рабочим кодом. Если вы переместите вправо, ползунок «верхний диапазон», а затем переместите его обратно к максимальному значению, появится надпись «Без ограничений». При первой загрузке вы увидите максимальный диапазон 50000 вместо «Неограниченный». В нижнем диапазоне также будет отображаться 0 вместо 0 долларов. Как это исправить?

revenueRange = [0, 500000]
revenueRangeConfig: any = {
    connect: true,
    start: [ 0, 500000], // Handle start position
    step: 5, // Slider moves in increments of '5'
    range: {
      'min': [  0, .0001 ],
      '10%': [ 1, 1 ],
      '20%': [  5 ],
      '25%': [  10 ],
      '30%': [  50 ],
      '40%': [  100 ],
      '50%': [  1000 ],
      '70%': [  10000 ],
      'max': [  500000 ]
    },
    format: {
      to:  value  => {
        if (value == 0) {
      return "$" + 0;
        } else if (value < 1) {
          let number = (value*1000).toString().substring(0, 3);
          return "$" + parseInt(number) + " Thousand";
        } else if (parseInt(value).toString().length <= 3) {
          let roundedVal = Math.round(Number(value));
          return "$" + roundedVal + " Million"
        } else if (parseInt(value).toString().length >= 4) {
          value = Math.round(value);
          let theVal = value/1000;
          let re = new RegExp("(\\d+\\.\\d{" + 2 + "})(\\d)"),
            m = theVal.toString().match(re);
          let s;
          if (m) {
            s = parseFloat(m[1])
          } else {
            s = theVal.valueOf();
          }
          if(s == "500"){
            return 'Unlimited';
          } else {
            return  "$" + s + " Billion";
          }
        }
      },
      from: value  => {
        return value;
      }
    }
  };

1 Ответ

0 голосов
/ 07 августа 2020

В итоге я использовал кастомную трубу.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'revenueRange'
})
export class RevenueRangePipe implements PipeTransform {

  transform(value: any) {
    if (value === 500000) {
      return 'Unlimited';
    }
    if (value === 0) {
      return '$0';
    }
    return value;
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...