Angular 9-Json 管道不显示十进制值答案

【问题标题】：Angular 9- Json pipe does not display the decimal valueAngular 9-Json 管道不显示十进制值
【发布时间】：2020-05-07 07:27:11
【问题描述】：

我有一个类似这样的 json 值

this.data = {"eoiStatistics": [
{
  "dateRange": {
    "explicitStartDate": "1997-01-01T00:00:00",
    "explicitEndDate": "2019-07-01T00:00:00"
  },
  "outstandingApplicationCount": 0.0,
  "pendingApplicationCount": 24.0,
  "approvedApplicationCount": 0.0,
  "declinedApplicationCount": 0.0,
  "closedApplicationCount": 0.0 }]}

当我在应用程序中使用 json 管道 {{data | json}} 显示它时，它会像这样显示

{"eoiStatistics": [
{
  "dateRange": {
    "explicitStartDate": "1997-01-01T00:00:00",
    "explicitEndDate": "2019-07-01T00:00:00"
  },
  "outstandingApplicationCount": 0,
  "pendingApplicationCount": 24,
  "approvedApplicationCount": 0,
  "declinedApplicationCount": 0,
  "closedApplicationCount": 0
}]}

所以如果我的值为 24.0 它显示 24 ，我知道 .0 没有任何值，但我需要在我的应用程序中显示它。有办法吗？

【问题讨论】：

标签： html css angular pipe less

【解决方案1】：

没有办法控制这一点。但是，您可以想到两种解决方法。您可以操作正在发送的数据，也可以更改数据的显示方式：

将 json 值改为字符串，而不是数字：

"pendingApplicationCount": "24.0"

更改它的显示方式。因为你使用 angular，所以可以使用DecimalPipe 管道

<div>{{ data.pendingApplicationCount | number: '1.1-5' }}</div>

【讨论】：

【解决方案2】：

除了@PoulKruijt 的回答，我们可以看到JsonPipe 是一个单行变换函数。

transform(value: any): string {
  return JSON.stringify(value, null, 2);
}

所以我们可以在JSON.stringify() 函数中编写一个带有replacer 参数的自定义管道。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'jsonDecimal'
})
export class JsonDecimalPipe implements PipeTransform {

  transform(value: any, length?: number): any {
    return JSON.stringify(
      value, 
      (key: any, value: any) => {
        if (typeof value === 'number') {
          return Number(value).toFixed(length);
        } else {
          return value;
        }
      }, 
      2);
  }

}

示例 1

然后您可以指定需要在模板中显示的小数位数。

<div>{{ data | jsonDecimal:1 }}</div>

将打印带一个小数位的数字

模板输出

{ "eoiStatistics": [ { "dateRange": { "explicitStartDate": "1997-01-01T00:00:00", "explicitEndDate": "2019-07-01T00:00:00" }, "outstandingApplicationCount": "0.0", "pendingApplicationCount": "24.0", "approvedApplicationCount": "0.0", "declinedApplicationCount": "0.0", "closedApplicationCount": "0.0" } ] }

示例 2

如果您需要在末尾附加更多的零，您还可以指定更多的十进制数字。

<div>{{ data | jsonDecimal:4 }}</div>

将打印

{ "eoiStatistics": [ { "dateRange": { "explicitStartDate": "1997-01-01T00:00:00", "explicitEndDate": "2019-07-01T00:00:00" }, "outstandingApplicationCount": "0.0000", "pendingApplicationCount": "24.0000", "approvedApplicationCount": "0.0000", "declinedApplicationCount": "0.0000", "closedApplicationCount": "0.0000" } ] }

【讨论】：