数値パイプスローを使用する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の次に非常に重要で、文字列から数字への変換は可能です。あなたが実際にタイプ番号の変数を渡す必要があることを意味し、

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

：アンギュラ2のソースコードを見てみると

Answer 1

は、私がこれを発見しました。 inputを使用して、ngModelにバインドしたのと同じように、amount変数は常にstring型です。

注意：タイプヒントはTypeScriptでのみ表示されます。

：あなたはこのようにそれを使用することができます

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

：JavaScriptに をtranspilingした後、あなたは情報

私はその場で数にあなたの変数を変換し、新しいパイプを実装することをお勧めしたいことを失います

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