在 Aurelia 中使用 HTML 中的 Numeral.js

Question

我有以下有效的 Aurelia 代码：

total = 9000;

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${total}</div>
</div>

我想做的是使用 HTML 中的 Numeral.js 库将总变量从 9000 格式化为 9000.00。这是我试过的：

total = 9000;

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${numeral(${total}).format('0.00')}</div>
</div>

以及以下内容：

total = 9000;

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">numeral(${total}).format('0.00')</div>
</div>

但不幸的是，none 起作用了。我尝试在 TypeScript 中使用 Numeral 库，它工作正常。不过，我在 HTML 上需要这个。我的反应非常灵敏，所以不要犹豫，问任何问题。

Answer 1

使用值转换器包装对数字的调用。

这就是您的价值转换器的样子。不过，您必须向文件中添加正确的导入语句。

import numeral from 'numeral';

export class CurrencyFormatValueConverter {
  toView(value, format = '0.00') {
    return numeral(value).format(format);
  }
}

然后您需要使用 require 元素将值转换器加载到您的视图中。

<require from="./path/to/file'></require>

然后你就可以在你的视图中使用它了。

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${total | numeral }</div>
</div>

或者您可以传入自定义格式作为参数来覆盖默认值：

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${total | numeral:'([=13=],0.00)' }</div>
</div>

顺便说一下，您应该看一下我们的文档，因为它实际上包括这个精确值转换器作为其示例之一：https://aurelia.io/docs/binding/value-converters#value-converters

在 Aurelia 中使用 HTML 中的 Numeral.js

Using Numeral.js from HTML in Aurelia

html

aurelia

numeral.js