Question

我正在致力于国际化，目前我的职能是：

getDisputedAmount() {
return this.compactInvoices.reduce((sum, invoice) => {
  const result = sum + parseFloat(invoice.disputedAmount || 0);
  return result;
}, 0);

}

现在，我将使用服务并使用.toLocaleString来提供国家/地区的语言环境和国家/地区代码：

getDisputedAmount() {
return this.compactInvoices.reduce((sum, invoice) => {
  const result = sum + parseFloat(invoice.disputedAmount || 0);
  const currencyLocale = this.UserPreferences.getCountryLocale(); //for eg --> 'de-DE'
  const currencyCode = this.UserPreferences.getCountryCode(); // 'EUR'
  return Number(result).toLocaleString(currencyLocale, {
  // style: 'currency',
    currency: currencyCode,
    minimumFractionDigits: 2
  });
}, 0);

}

但是以某种方式使用第一个函数可以带来正确的结果，但是如果我使用toLocaleString，它将在用户界面中带来NaN。我已经检查了“源”选项卡中的值，并且带有toLocaleString的后一个代码具有正确的数字。

我也正在使用内插法在html中调用函数

<div class="col-140"><span class="sum-label">{{ modal.getDisputedAmount() }}</span></div>

如果我在此处应用Number管道，我什至看不到GUI上写的NaN，它只是空白。

让我知道您的建议。

compactInvoices中的值是数字，我认为当toLocaleString第一次运行时，总和被转换为字符串货币格式，同时在sum函数中将sum（这是字符串）添加到新的issuedAmount中给出NaN。因此，请一起分享如何使用toLocalString和简化函数。

Answer 1

您需要使用reduce计算格式后的格式。

getDisputedAmount() {
  const result = this.compactInvoices.reduce((sum, invoice) => {
    return sum + (parseFloat(invoice.disputedAmount) || 0);
  }, 0);
  const currencyLocale = this.UserPreferences.getCountryLocale(); //for eg --> 'de-DE'
  const currencyCode = this.UserPreferences.getCountryCode(); // 'EUR'
  return result.toLocaleString(currencyLocale, {
    // style: 'currency',
    currency: currencyCode,
    minimumFractionDigits: 2
  });
}

一起使用toLocalString和Reduce函数：toLocaleString在显示中显示NaN

1 个答案: