JSON中的格式化時間以在Ag-Grid中顯示

Question

我正在使用角度為5的ag-grid。我的目標是要創建一個包含一些列的網格，其中的一列是“時間”列，並以“ hh：mm ”格式顯示時間。

我在網格中顯示的所有數據均來自JSON對象。 現在我顯示的時間看起來像這樣“ 2018-04-28T08：16：07.632Z ”。

我對Angular Pipes進行了一些研究，但是我無法弄清楚如何將其用於需要格式化一列的JSON對象，但是需要將其“綁定”到其他列中的正確單元格。 我認為所有格式都必須在打字稿代碼中完成。

你們有沒有做過類似的事情或有想法要這樣做？

Answer 1

我沒有找到相同的問題，這很簡單，所以我將解釋我所做的事情：

在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每次都以相同的格式出現時，這才起作用。

Answer 2

也許您將在此Pipe中創建一個Pipe以及mommentjs。

Answer 3

在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還是Angular的本機DatePipe），您必須將其注入：

constructor(private readonly _customDatePipe: CustomDatePipe) {}

並在模塊的提供程序中包含CustomDatePipe（或本機DatePipe的CommonModule）。

管道的transform（）方法將格式化要在AgGrid嘗試呈現時立即顯示的JSON部分（在您的情況下為日期屬性）。

PS：如果您使用的是AgGrid CellRenderer-Component，則可以直接在其模板中使用管道，而無需注入（盡管仍然需要放置在提供程序中）：

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

Answer 4

這適用於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

使用時刻庫​​，您可以配置許多日期格式，包括語言環境支持。

希望這對某些人有所幫助。