Время форматирования в JSON для отображения в ag-grid - PullRequest
Новая
       9

Время форматирования в JSON для отображения в ag-grid

0 голосов
/ 28 апреля 2018

Я использую ag-grid с угловой 5. Моя цель - создать сетку с несколькими столбцами, где один из столбцов является столбцом «Время» и отображает время в этом формате « чч: мм ».

Все данные, отображаемые в сетке, получены из объекта JSON. Сейчас отображаемое время выглядит следующим образом: " 2018-04-28T08: 16: 07.632Z ".

Я немного посмотрел на Angular Pipes, но не могу понять, как использовать его для объекта JSON, где мне нужно отформатировать один столбец, но его нужно "привязать" к правильным ячейкам в других столбцах. Я думаю, что все форматирование должно быть сделано в машинописном коде.

Кто-нибудь из вас делал что-то подобное или у вас есть идея сделать это?

Ответы [ 4 ]

0 голосов
/ 18 апреля 2019

Это для версии Angular2 +. Если вы используете библиотеку моментов в вашем приложении. Тогда работа действительно проста

В вашем файле .ts: 

    import * as moment from 'moment';

{
    headerName: 'End Date',
    field: 'endDateUTC',
    minWidth: 80,
    maxWidth: 100,
    valueFormatter: function (params) {
        return moment(params.value).format('hh:mm');
    },
},

И вы получите:

Дата окончания: 10: 55

Используя библиотеку моментов, вы можете настроить множество форматов дат, включая поддержку локали.

Надеюсь, это кому-нибудь пригодится.

0 голосов
/ 28 апреля 2018

В Ag-Grid у вас есть параметры сетки, которые вы определяете в какой-то момент: 

this.gridOptions = {
  // ...
  columnDefs: [    'DATE': {
     headerName: 'Datum',
     field: 'myJson.date',
     cellRenderer: (params: ICellRendererParams) => params.value ? 
        `<div class="my-awesome-date-style">${this._customDatePipe.transform(params.value)}</div>` : ''
  }],
  // ...
}

Чтобы использовать канал (будь то собственный CustomDatePipe или собственный DatePipe в Angular) внутри файла машинописного текста (например, вне шаблона), вы должны внедрить его: 

constructor(private readonly _customDatePipe: CustomDatePipe) {}

и включите CustomDatePipe (или CommonModule для собственного DatePipe) в поставщики вашего модуля.

Метод канала transform () отформатирует часть JSON (в вашем случае свойство date), которую вы хотите отобразить, как только AgGrid попытается ее отобразить.

PS: Если вы используете AgGrid CellRenderer-Component, вы можете просто использовать конвейер непосредственно в его шаблоне без внедрения (хотя необходимо добавить провайдеров):

<div class="my-awesome-date-style">${params.date | customDatePipe}</div>

0 голосов
/ 29 апреля 2018

Я не нашел идентичного вопроса по этому вопросу, и он был очень прост, поэтому я объясню, что я сделал:

В coulmDefs я добавил valueFormatter: HomePage.timeFormatter 

columnDefs = [
    {headerName: 'Time', field: 'time', valueFormatter: HomePage.timeFormatter}]

Затем я добавил эту функцию в тот же файл: 

// I take the substring of this '2018-04-28T08:16:07.632Z' and I get '08:16'
static timeFormatter(params) {return params.value.substring(11, 16);}

Имейте в виду, что это работает только тогда, когда вы знаете, что DateTime каждый раз приходит в одном и том же формате.

0 голосов
/ 28 апреля 2018

Может быть, вы создадите трубу, а также комментарии внутри этой трубы.

...