PrimeNG DataTableカスタムソートまたはフィルタリング（角2）

Question

PrimeNg Datatableのソート/フィルタリングの日付列に問題があります。 "dd/mm/yyyy"という文字列を表示しています。

1. 「dd/mm/yyyy」を表示するためにテンプレートを使用している場合、フィルタは日付形式の実際のデータバインドでフィルタとして機能しません。
2. データをバックエンドから文字列形式に変換すると、日付ではなく文字列でソートされるため、ソートが正しくありません。

Answer 1

私はこの問題をもっと簡単で速いので、moment.jsを使って解決しましたが、フレームワークなしでコードをカスタマイズすることができます（条件や文字列変換）

だから、あなたはあなたのプロジェクトにmoment.jsを追加する必要があります。 a）は、このサイトhttps://cdnjs.com/libraries/moment.js/ Bから、あなたのメインのHTMLインデックスファイル（ここで、主な角度セレクタがあり、polyfillsなど）へのsrcのリンクを追加することによって）が、もしそれはプロダクションで、npmで追加することをお勧めします。 http://momentjs.com/docs/ここに他の可能性があります。 uはすでにprimengモジュールがprimengの​​p型のdataTableタグ内のhtmlファイルで、あなたのプロジェクトに追加した場合

次に、あなたは、pがある

declare var moment; 

その後、import文の下と@Component注釈を超える瞬間変数を宣言する必要がありますここでは、このタグ内の-columnタグとは、私たちはそうのように=並べ替え可能な「カスタム」と（sortFunction）=「mysort（$イベント）」を追加する必要があります。P-columnタグで表示

<p-column field="date" header="Data" sortable="custom" (sortFunction)="mysort($event)"></p-column> 

日はDDです。 MM.YYYY文字列形式（例：03.01.2017

）

その後、データをテーブルに表示するために使用する配列にデータを取得してプッシュするコンポーネントでは、私の例ではappointmentsという名前の関数をmysortという名前で追加する必要があります（この関数はhtml p-私の例のa.dateとb.dateの列タグ）

mysort(event) { 
    let comparer = function (a, b): number { 
     let formatedA = moment(a.date, "DD.MM.YYYY").format('YYYY-MM-DD'); 
     let formatedB = moment(b.date, "DD.MM.YYYY").format('YYYY-MM-DD'); 
     let result: number = -1; 

     if (moment(formatedB).isBefore(formatedA, 'day')) result = 1; 
     return result * event.order; 
    }; 

    this.appointments.sort(comparer); 
} 

たちはYYYY-MM-DDにフォーマットする必要があり、「2016年12月21日」のような文字列です。それから、日付を比較しています。

ちょうど、私はこのコードをチェックして動作します。 説明がチュートリアルのスタイルで書かれていれば、助けてくれることを願っていますが、これは私の最初の答えであり、私は正しい方法でそれをやりたいと思っています：

Answer 2

私はRelisと同じ方法で解決しました。しかし、 "this.appointments"変数を再割り当てするまでは機能しませんでした。

mysort(event) { 

    this.appointments.sort((appointmentA, appointmentB) => { 

    // Here the property date is a date string with the format 'dd/mm/yyyy'. 
    // In the constructor of moment(), the second paramater is 
    // the format of the string you're passing in. 
    const momentA = moment(appointmentA.date, 'dd/mm/yyyy'); 
    const momentB = moment(appointmentB.date, 'dd/mm/yyyy'); 

    if(momentB.isBefore(momentA)){ 
     result = 1; 
    } 

    return result * event.order; 
    }); 

    // This is the key here. 
    this.appointments = [...this.appointments]; 
    } 

Answer 3

私は少し別の問題を解決するために使用していますが、最初は役立つ回答に@Relisに感謝します。 質問については、ヘッダーをクリックするたびに日付を変換する追加の機能やコールバックなしでこれを解決できると思います。 あなたは、単に（データテーブル内のデータを表示するには、ソートや表現のためのモデル）をモデルと表現を分離する必要が 我々は、日付プロパティを持つオブジェクトの配列を持っている想像：

let dataArray = [{date:'01/02/2016'},{date:'01/02/2017'}] 

そして、あなたはすべてのオブジェクトを拡張することができ追加のプロパティsortableDateと、この配列：形質転換のために

let dataArray = [{date:'01.02.2016', sortableDate:'2016-02-01'},{date:'01.02.2017', sortableDate:'2017-02-01'}] 

は、私はまた、moment.jsを使用することをお勧めします。今、あなたは、ソートする値と別のものを表示するには、プロパティのいずれかを使用できます。

<p-column [field]="'mySortableDate'" [header]="'Header name' [sortable]="true"> 
    <ng-template let-col let-data="rowData" pTemplate="body"> 
    <span>{{data.date}}</span> 
    </ng-template> 
</p-column> 

Answer 4

だけで何時間とデータが来るの両方の場合について

<p-column field="StartDate" [editable]="true" header="Start Date"> 
 
<ng-template let-col let-car="rowData" pTemplate="body"> 
 
<span>{{car[col.field] | date: ' d,MMM,yyyy'}}</span> 
 
</ng-template>       
 
</p-column>