typescript 使用数字管道会引发 InvalidPipeArgumentException（管道“DecimalPipe”的无效参数“1”）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38461080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using number pipe throws InvalidPipeArgumentException (Invalid argument '1' for pipe 'DecimalPipe')
提问by Celebes
I want to write some number into <input>and dynamically display it as a decimal inside {{}}through pipe. It throws exception instead. Here's my code:
我想将一些数字写入<input>并{{}}通过管道动态显示为小数。它会抛出异常。这是我的代码：
app.template.html:
app.template.html：
<h1>amount = {{amount|number:'1.2-2'}}</h1>
<input [(ngModel)]="amount"/>
app.component.ts:
app.component.ts:
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/app.template.html'
})
export class AppComponent {
private amount:number;
}
Plunker: http://plnkr.co/edit/I7ynnwBX4DWJfHNPIPRu?p=preview
Plunker：http://plnkr.co/edit/I7ynnwBX4DWJfHNPIPRu?p=preview
Write any number into the input and see exception being thrown in the console.
将任意数字写入输入，并查看控制台中抛出的异常。
Edit:
编辑：
Working code as per rinukkusu suggestion:
根据 rinukkusu 建议的工作代码：
app.template.html:
app.template.html：
<h1>amount = {{amount|number:'1.2-2'}}</h1>
<input [ngModel]="amount" (ngModelChange)="onChange($event)"/>
app.component.ts:
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/app.template.html'
})
export class AppComponent {
private amount:number;
onChange($event) {
this.amount = +$event;
}
}
This +next to $eventis very important and what makes conversion from string to number possible!
这+next to$event非常重要，是什么使从字符串到数字的转换成为可能！
回答by rinukkusu
Looking at the source code of Angular 2 I found this:
查看 Angular 2 的源代码，我发现了这一点：
if (!isNumber(value)) {
throw new InvalidPipeArgumentException(pipe, value);
}
which means, you actually need to pass a variable of type number. Using the inputand binding to ngModellike you did there, your amountvariable will always be of type string.
这意味着，您实际上需要传递一个类型为 number 的变量。使用input和绑定ngModel就像你在那里所做的那样，你的amount变量将始终是字符串类型。
Remember: type hints are only visible in TypeScript. After transpiling to JavaScript you lose that information
请记住：类型提示仅在 TypeScript 中可见。转换为 JavaScript 后，您会丢失该信息
I'd suggest implementing a new pipe which converts your variable to a number on the fly:
我建议实施一个新管道，将您的变量即时转换为数字：
@Pipe({
name: 'toNumber'
})
export class ToNumberPipe implements PipeTransform {
transform(value: string):any {
let retNumber = Number(value);
return isNaN(retNumber) ? 0 : retNumber;
}
}
You can use it like this:
你可以这样使用它：
<h1>amount = {{amount | toNumber | number:'1.2-2'}}</h1>
<input [(ngModel)]="amount" />
回答by Leo Delos Reyes
Following rinukkusu's solution above -- I was able to do it without creating a custompipe. I just used <input [(ngModel)]="Number(amount)|number:'1.2-2'"/>and it worked for me.
按照上面的 rinukkusu 解决方案 - 我能够在不创建自定义管道的情况下做到这一点。我刚用过<input [(ngModel)]="Number(amount)|number:'1.2-2'"/>，对我有用。
