Angular DecimalPipe 转换在 Firefox 中不起作用答案

【问题标题】：Angular DecimalPipe Transform Not Working in FirefoxAngular DecimalPipe 转换在 Firefox 中不起作用
【发布时间】：2018-06-25 18:08:31
【问题描述】：

我正在以编程方式应用 DecimalPipe 转换来将数字格式化为有两位小数。这适用于 Chrome、IE 和 Edge。它不适用于 Firefox (60.0.2)。

<input class="hour-input" min="0" max="24" type="number" step=".01" [(ngModel)]="hours">

export class HourComponent {
    hours: string;
    constructor(private numberPipe: DecimalPipe) { }

    formatHours() {
        this.hours = this.numberPipe.transform(this.hours, '1.2-2');
    }
}

我认为这个提到 intl 包的 post 可能是相关的，但我已经在导入这个 polyfill。我也理解 Angular pipes no longer depend on the intl package 从 Angular v5 开始。我使用的是标准的LOCALE_ID 模式。

请注意，如果直接在 UI 中使用，DecimalPipe 确实可以在 Firefox 中工作：

{{hours | number: '1.2-2'}}

【问题讨论】：

我想知道 angular 中的输入是否将其改回。您可以在分配行之后立即控制台日志并查看它是否正确？另外，您如何调用 formatHours？
我在 blur 上调用 formatHours。我在转换前后添加了日志，输入值 1，控制台输出“1”然后“1.00” - 但显示的值仍然只是“1”，没有小数位。
我开始认为这只是 Firefox 清除数字输入的小数位，请参阅stackoverflow.com/questions/7790561/…
这正是我的想法。因此，控制台日志正在做正确的部分:)
发现了这个长期（并且很愤怒）的帖子：bugzilla.mozilla.org/show_bug.cgi?id=1003896

标签： angular formatting angular-pipe

【解决方案1】：

看起来这不是 Angular 的问题，而是 Firefox 处理数字输入的问题。默认情况下，Firefox 中的数字输入会清除小数点后的零。这似乎是一个longstanding issue，还没有标准解决方案。

看起来band-aid fix 可能会起作用。这涉及在用户键入时将输入类型动态更改为数字，然后在模糊时将其更改回文本。有点骇人听闻。

希望看到 Firefox 为此实现标准覆盖或改进的默认设置。

【讨论】：