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

Question

我有一个类似于这样的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没有值，但我需要在我的应用程序中显示它。有什么方法可以做到这一点吗？

Answer 1

没有办法控制这种情况。不过，你可以想到两个变通的办法。你可以操作发送的数据，或者改变数据的显示方式。

1. 把json值改成一个字符串，而不是一个数字。

"pendingApplicationCount": "24.0"

2. 改变数据的显示方式。因为你使用的是angular，所以你可以使用 DecimalPipe 管子

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

Answer 2

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

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

所以我们可以写一个自定义的管子，用 replacer 中的论点 JSON.stringify() 功能。

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" } ] }

例二

如果你需要在末尾添加更多的零，你也可以指定更多的小数点。

<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" } ] }