ng2-nouislider 格式范围负载角 9

Question

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

Answer 1

我最终使用了自定义管道。

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