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

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

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

"pendingApplicationCount": "24.0"

更改显示方式。因为使用的是角形，所以可以使用DecimalPipe管道

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

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

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

2 个答案: