9

我想通过管道将一些数字写入<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

4

2 回答 2

14

查看 Angular 2 的源代码，我发现：

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

这意味着，您实际上需要传递一个数字类型的变量。像你在那里那样使用input和绑定，你的变量将始终是字符串类型。ngModelamount

请记住：类型提示仅在 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" />
于 2016-07-19T14:30:09.470 回答
-1

按照上面 rinukkusu 的解决方案——我能够在不创建自定义管道的情况下做到这一点。我刚用过<input [(ngModel)]="Number(amount)|number:'1.2-2'"/>，它对我有用。

于 2018-03-21T20:24:21.877 回答