如果输入中没有小数点，则角度扩展货币管道不格式化字符串/int答案

【问题标题】：angular extended currency pipe in is not formatting string/int if there is no decimal point in input如果输入中没有小数点，则角度扩展货币管道不格式化字符串/int
【发布时间】：2016-10-21 21:16:57
【问题描述】：

如果数字是字符串格式并且字符串中没有小数点，则角度货币管道不会将字符串/int转换为货币格式。

假设金额为 12，我想显示 12.00 美元，如果通过了“12”，则不显示，但如果通过了 12.00，则它可以正常工作。

//Code

import {Pipe, PipeTransform} from "@angular/core";
import {CurrencyPipe} from "@angular/common";
const _NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;

@Pipe({name: 'myCurrency'})
export class MyCurrencyPipe implements PipeTransform  {
  constructor (private _currencyPipe: CurrencyPipe) {}

  transform(value: any, currencyCode: string, symbolDisplay: boolean, digits: string): string {
    if (typeof value === 'number' || _NUMBER_FORMAT_REGEXP.test(value)) {
      return this._currencyPipe.transform(value, currencyCode, symbolDisplay, digits);
    } else {
      return value;
    }
  }
}


@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div>{{priceNoDecimal}}</div> {{priceNoDecimal | myCurrency}}
      <div>{{priceWithDecimal}}</div> {{priceWithDecimal | myCurrency}}      
    </div>
  `,
})
export class App {
  name:string;
  priceWithDecimal: string;
  priceNoDecimal: string;
  constructor() {
    this.name = 'Angular2',
    this.priceNoDecimal = "12"
    this.priceWithDecimal = "12.00"
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , MyCurrencyPipe],
  providers: [CurrencyPipe],
  bootstrap: [ App ]
})
export class AppModule {}


//output

Hello Angular2

12
12
12.00
USD12.00

Plunker

【问题讨论】：

什么意思？ "12" 和 "12.00" 都转换为 USD12.00。
您链接到的示例 plunker 运行良好，在第一行中您没有在 div 内应用管道变换。
@StefanSvrkota 是的。这就是我想要的，但它没有发生
@silentsod，我现在编辑了 plunker。请查看plnkr.co/edit/UONxA2?p=preview
这与 Angular 2 或其管道无关； /^(\d+)?\.((\d+)(-(\d+))?)?$/doesn't match "12"。下次尝试一些基本的调试，你可以将它与 Angular 框架完全隔离。

标签： angular angular2-pipe

【解决方案1】：

如果您查看已应用的正则表达式：/^(\d+)?\.((\d+)(-(\d+))?)?$/，它需要一个小数点。

以下正则表达式使小数点成为可选/^(\d+)?\.?((\d+)(-(\d+))?)?$/

【讨论】：

你为什么要混合?和{0,1}？
我非常懒惰。只取 0 或 1。
这没有意义，使用单个字符会更懒。
老实说，正则表达式不是我的强项。我得去看看？来确定它的作用。谢谢，虽然@jonrsharpe 因为你今天确实让我学习了一些关于正则表达式的新东西。我已将最初的答案更改为使用较短的形式。

【解决方案2】：

如果没有上下文，这个问题可能会不清楚。来自the previous answer 的管道是正则表达式that is used in original number pipes，用于检测字符串中的数字：

const _NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;

为了更贴近input conditioning of original currency pipe，管道可以改为：

function isNumeric(value: any): boolean {
  return !isNaN(value - parseFloat(value));
}

@Pipe({name: 'looseCurrency'})
export class LooseCurrencyPipe implements PipeTransform {
  constructor(private _currencyPipe: CurrencyPipe) {}

  transform(value: any, currencyCode: string, symbolDisplay: boolean, digits: string): string {
    value = typeof value === 'string' && isNumeric(value) ? +value : value;

    if (typeof value === 'number') {
      return this._currencyPipe.transform(value, currencyCode, symbolDisplay, digits);
    } else {
      return value;
    }
  }
}

其中isNumeric 是从framework internals 提取的辅助函数。用这种方法应该work fine。

【讨论】：

你找到我了；）。现在我认为我是地球上最懒的人。我会自己解决的