指定值无法解析，或者在使用数字管道时超出范围

Question

The specified value cannot be parsed, or is out of range

当我得到我的对象时，我用管道格式化了一个数字，但是 returns 这个警告和值没有显示。如果我删除它，它会显示。

这不显示值

  <input name="value" [ngModel]="value | number : '1.2-2'"/>

这显示值

  <input name="value" [ngModel]="value"/>

TS 在这里，我在列表中选择对象后通过其 id 获取对象。

  ngOnInit(){
    this.get();
  }

get() {
    this.service.get(this.id).subscribe(
      (data) => {
        this.object = data;
        this.name = this.object.name;
        this.value = this.object.value;
      },
      (error) => {
        console.log(error);
      }
    );
  }

该值是一个数字，我在控制台中毫无问题地获取了它。

Answer 1

只需绑定到 value 而不是 ngModel。不需要。

<input name="value" [value]="value | number : '1.2-2'"/>

Minimalist Stackblitz Demo

Answer 2

问题不在于 ngModel，而在于 OnPush 策略。

进行异步工作时，您需要通知变更检测器您的数据已更改。

constructor(private cd: ChangeDetectorRef) {}

get() {
    this.service.get(this.id).subscribe(
      (data) => {
        this.object = data;
        this.name = this.object.name;
        this.value = this.object.value;
        // notify the cd here
        this.cd.markForCheck();
      },
      (error) => {
        console.log(error);
      }
    );
  }

Answer 3

好的，这是我最后的看法。我现在明白你的问题是什么了。没看标题，只看了你的代码

问题出在您的 value 上。为了使值与数字管道一起使用，它必须是 Number 或 string 但格式为 parse-able。 value在数字管道中转换时，首先解析为Number。如果它不是 parse-able，那么你会得到你得到的错误。

您可能正在使用不支持的逗号作为小数点分隔符。

"1,34" 不正确。 "1.34" 正确。

如果我想进一步帮助您，我需要知道 data.value

的值是多少

Answer 4

<input [value]="units * 600 + 2500 | number" readonly type="text" name="grandtotal"
class="form-control" id="grandtotal" placeholder="Grand Total">

我发现我的解决方案在这里更改或替换 HTML type="text"

中的类型

Answer 5

如果你阅读了文档，你不妨检查管道编号参数：

1.2-2 = {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

其中：

minIntegerDigits：小数点前最小整数位数。默认为 1。

minFractionDigits：小数点后的最小位数。默认为 0。

maxFractionDigits：小数点后的最大位数。默认为 3。

Answer 6

只需将 html 中的值解析为任何值，然后使用 parseFloat 或 parseInt

这对我有用：

 let importeLuz = parseFloat(valor.importe as any);

       console.log(typeof(importeLuz)) //number

指定值无法解析，或者在使用数字管道时超出范围

The specified value cannot be parsed, or is out of range when using number pipe

angular

angular-pipe