Angular 9- Json труба не отображает десятичное значение - PullRequest
Новая
       21

Angular 9- Json труба не отображает десятичное значение

2 голосов
/ 07 мая 2020

У меня есть значение 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 pipe {{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 не имеет значения, но мне нужно отобразить его в моем приложении. Есть способ сделать это?

Ответы [ 2 ]

3 голосов
/ 07 мая 2020

Нет возможности контролировать это. Однако вы можете придумать два обходных пути. Вы можете манипулировать отправляемыми данными или изменить способ отображения данных:

  1. Измените значение json на строку вместо числа: 
"pendingApplicationCount": "24.0"
Изменить способ отображения. Поскольку вы используете angular, вы можете использовать DecimalPipe pipe 
<div>{{ data.pendingApplicationCount | number: '1.1-5' }}</div>
1 голос
/ 07 мая 2020

В дополнение к ответу от @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" } ] }

Пример 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" } ] }
...