时间戳

首页 > 解决方案 > 如何在 Angular 中处理管道和数字的内部化

angular - 如何在 Angular 中处理管道和数字的内部化

问题描述

我认为我有一个非常简单的问题，但在 Angular 中似乎很难解决。我是荷兰人，我住在欧盟的荷兰，我需要创建一个金融应用程序，所以里面有很多货币和日期。

我创建了一个带有一些自定义 Angular 管道的模板和一个将数据加载到模板中的 observable。Observable 工作正常。

此时当数字 18000 出现时：

verBeterEuro$ | async | currency:"EUR"

在浏览器中显示 €18,000.00。

如果数字百分比 9 进来然后

verbeterProcent$ | async | percent: '0.2-2':'en-NL

显示 900.00 % 这在我们国家都是完全错误的。

这是我的模板代码。

<div fxLayoutGap="1%" fxLayoutAlign="start center">
      <h3>Verbetering:</h3>   
      <h4>{{ verBeterProcent$ | async | percent:'0.2-2':'en_NL' }}  </h4>
      <h4>{{ verBeterEuro$ | async | currency:"EUR"}}</h4>   
  </div>

这是我的打字稿代码：

verBeterEuro$ = new Observable<number>();
verBeterProcent$ = new Observable<number>();

这是我在 ngModule 中的内部化代码：

 providers: [{provide: MAT_DATE_LOCALE, useValue: 'nl-NL'}, {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}]

数字货币 18000 应显示为 €18.000,00 数字前 9 应显示为 9,00%。

有人知道如何解决这个问题吗？

标签： angularinternationalizationangular-material

解决方案

我找到了一种我可以接受的解决方法：

也许其他一些人也有同样的挑战，所以这是我的解决方法。

在打字稿中添加：

import { registerLocaleData } from '@angular/common';
import nl from '@angular/common/locales/nl';

 ngOnInit() {

        registerLocaleData(nl);
}

在模板文件中：

<div fxLayoutGap="1%" fxLayoutAlign="start center">
      <h3>Verbetering:</h3>
      <h4>{{ verBeterProcent$ | async | number:'.2':'nl' }}% </h4>
      <h4>€{{ verBeterEuro$ | async | number:'.2':'nl'}}</h4>
    </div>

这个结果是好的，它不是很好，但它现在有效。

推荐阅读