web-dev-qa-db-ja.com

ag-gridに表示する前にデータをフォーマットする方法

ag-grid を発見しました。私はangular2 +でそれを使用しており、APIからデータをロードしています。フィールドの1つは日付ですが、ISO形式です。私はそれをフォーマットしようとしました、それを行う方法はありますか、パイプまたは他の方法を追加することは可能ですか？通常、私はこのようにします{{someISODate |日付： 'dd.MM.yyyy HH：mm'}}。表示する前にコンポーネントで手動でフォーマットする必要がありますか？また、1つの列の下に2つのフィールドを追加することが可能かどうかも考えていました。どうして？さて、私は列の作者がいて、APIから取得したデータにはauthor.firstnameとauthor.lastnameがあり、両方のフィールドを同じ列に表示したいと思います。ヒントや例は大歓迎です。

columnDefs = [
    {headerName: 'Datum kreiranja', field: 'createdAt' }, //<-- wanna format it
    {headerName: 'Vrsta predmeta', field: 'type.name' },
    {headerName: 'Opis', field: 'description'},
    {headerName: 'Kontakt', field: 'client.name'},
    {headerName: 'Autor', field: 'author.firstname'}, //<-- wanna display author.lastname in same cell
    {headerName: 'Status', field: 'status.name'}
];
ag-gridag-grid-ng2
10
Kerim092

これを行うには、cellRendererおよびmomentライブラリを使用します。

 {
      headerName: 'Datuk kreiranja', field: 'createdAt',
      cellRenderer: (data) => {
          return moment(data.createdAt).format('MM/DD/YYYY HH:mm')
      }
 }

momentを使用したくない場合は、次の方法で実行できます。

cellRenderer: (data) => {
     return data.value ? (new Date(data.value)).toLocaleDateString() : '';
}

Authorフィールドについても、

cellRenderer: (data) => {
     return data.author.firstname + ' ' + data.author.lastname;
}

参照：ag-grid：Cell Rendering

6
Paritosh

Angularの場合、moment.jsなしでこれを実行したい場合は、以下のようなことを試すことができます：

import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { formatDate } from '@angular/common';

@Component({
  selector: 'app-xyz'
})
export class xyzComponent implements OnInit {

  constructor( @Inject(LOCALE_ID) private locale: string ) {
  }

  columnDefs = [

    {headerName: 'Submitted Date', field: 'lastSubmittedDate', cellRenderer: (data) => {
      return  formatDate(data.value, 'dd MMM yyyy', this.locale);
     }];

}

このコンポーネントは角度/共通のフォーマット日付を使用しています

0
Vishwajeet

（日付の書式設定のための実用的で最適化されたソリューションはこちらです！）

Angular 8、日付が2019-11-16T04：00：00.000Zのような動的データでテストされました。Ag-gridでvalueFormatterを使用する場合、「field：」を含める必要はありません。注文日'"。

Ragavan Rajanの回答にも従います。したがって、angular CLIにmoment.jsをインストールする必要があります。

作業コードとインストールは以下のとおりです。

//Install moment.js in angular 8 cli.(no need of --save in latest versions
  npm install moment

//In your component.ts
  import * as moment from 'moment';

//Inside your colDef of ag-grid
  {
    headerName: "Effective Date",
    field: "effectiveDate",
    valueFormatter: function (params){
       return moment (params.value).format ('DD MMM, YYYY');
 }

/*
* This will display formatted date in ag-grid like 16 Nov, 2019.
* field name's value is from server side.(column name).
*/
0
Jenish Patel

valueFormatterを使用できます

{headerName: 'Datuk kreiranja', field: 'createdAt', valueFormatter: this.dateFormatter},

小さな関数を作成します。

dateFormatter(params) {
  return moment(params.value).format('MM/DD/YYYY HH:mm');
}
0
DancingDad