web-dev-qa-db-ja.com

数値パイプを使用すると、InvalidPipeArgumentExceptionがスローされます（パイプ 'DecimalPipe'の無効な引数 '1'）

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

プランカー： 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は非常に重要であり、文字列から数値への変換を可能にするものです。

typescriptangularangular2-templateangular2-pipe
9
Celebes

Angular 2のソースコードを見ると、これが見つかりました：

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

つまり、実際には型numberの変数を渡す必要があります。そこで行ったようにinputを使用してngModelにバインドすると、amount変数は常に文字列型になります。

注意：タイプヒントは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" />
10
rinukkusu