使用数字管道抛出InvalidPipeArgumentException(管道'DecimalPipe'的参数'1'无效)

Question

我想写一些数字<input>并{{}}通过管道将其动态显示为十进制内部.它会引发异常.这是我的代码:

app.template.html:

<h1>amount = {{amount|number:'1.2-2'}}</h1>
<input [(ngModel)]="amount"/>

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

将任何数字写入输入并查看控制台中抛出的异常.

---

编辑:

根据rinukkusu建议的工作代码:

app.template.html:

<h1>amount = {{amount|number:'1.2-2'}}</h1>
<input [ngModel]="amount" (ngModelChange)="onChange($event)"/>

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

这+旁边$event是非常重要的,是什么让从字符串转换到一些可能的!

Answer 1

看一下Angular 2的源代码,我发现了这个:

if (!isNumber(value)) {
  throw new InvalidPipeArgumentException(pipe, value);
}

这意味着,您实际上需要传递一个类型为number的变量.使用input和绑定ngModel一样,你的amount变量将始终是string类型.

请记住:类型提示仅在TypeScript中可见.转换为JavaScript后,您将丢失该信息

我建议实现一个新的管道,它可以动态地将你的变量转换为数字:

@Pipe({
    name: 'toNumber'
})
export class ToNumberPipe implements PipeTransform {
    transform(value: string):any {
        let retNumber = Number(value);
        return isNaN(retNumber) ? 0 : retNumber;
    }
}

你可以像这样使用它:

<h1>amount = {{amount | toNumber | number:'1.2-2'}}</h1>
<input [(ngModel)]="amount" />