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变量将始终是字符串类型。

请记住：类型提示仅在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" />

Answer 2

继上面的rinukkusu解决方案之后 - 我能够在不创建自定义组件的情况下完成此操作。我刚刚使用<input [(ngModel)]="Number(amount)|number:'1.2-2'"/>，它对我有用。

使用数字管道抛出InvalidPipeArgumentException（无效的参数＆＃39; 1＆＃39;管道＆＃39; DecimalPipe＆＃39;）

2 个答案: