NGX 数据表上的 Angular 2 Pipe ShortDate

Question

我想将日期列格式化为 Angular 2 NGX 数据表中的短日期。

这是 HTML：

<ngx-datatable
  [rows]="toDos"
  [columns]="columns">
</ngx-datatable>

这是组件 TypeScript

import { Component, OnInit } from '@angular/core';
import { IToDo } from '../shared/todo';
import { ToDoService } from '../shared/todo.service';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})

export class TodoListComponent implements OnInit {

  toDos: IToDo[];
  columns = [
    { prop: 'toDoId' },
    { name: 'To Do', prop: 'name' },
    { prop: 'priority' },
    { prop: 'dueDate'  },
    { prop: 'completed' }
  ];

  constructor(private _toDoService: ToDoService) {
  }

  ngOnInit() {
    this.toDos = this._toDoService.getToDos();
  }
}

我已经在 HTML 中尝试过此操作，但它给出了模板解析错误：

<ngx-datatable
  [rows]="toDos"
  [columns]="columns"
      <ngx-datatable-column prop="dueDate">
      <ng-template let-value="value" ngx-datatable-cell-template>
        {{value | date[:shortDate]}}
      </ng-template>
    </ngx-datatable-column>
    >
</ngx-datatable>

Answer 1

您可以仅用于date pipe格式化值。

{{value | date:'shortDate'}}相当于{{value | date:'ymd'}}输出日期如下：22/08/2017

Answer 2

constructor(
private fb: FormBuilder,
private _currencyPipe: CurrencyPipe,
private _datePipe: DatePipe
) {
this.rows = [
  {from: Date().toString(), to: Date(), amount: 100, verified: false},
  {from: Date(), to: Date(), amount: 100, verified: true},
];
}

ngOnInit() {

this.columns = [
  { name: 'FROM', prop: 'from', pipe: this.datePipe()},
  { name: 'TO', prop: 'to', pipe: this.datePipe()},
  { name: 'AMOUNT', prop: 'amount', width: 85, pipe: this._currencyPipe},
  { name: 'CONFIRM | DELETE', cellTemplate: this.editCell, width: 155}
];
this.buildForm();
}

datePipe () {
return {transform: (value) => this._datePipe.transform(value, 'MM/dd/yyyy')};
}

您始终可以使用编程方法来应用管道，事实上您可以使用这种方法创建自定义管道。@Inputngx-dataTable 中的管道需要一个带有转换的 Pipelike 结构：函数。您可以创建任何返回转换函数并根据需要操作数据的函数。

Answer 3

你的 HTML 是错误的。应该如下图所示。

<ngx-datatable
  [rows]="toDos"
  [columns]="columns">
       <ngx-datatable-column name="dueDate">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{row.dueDate | date:'shortDate'}}
        </ng-template>
      </ngx-datatable-column>
</ngx-datatable>

请在此处找到示例代码： https: //github.com/swimlane/ngx-datatable/blob/master/demo/sorting/sorting-default.component.ts

现场示例： http: //swimlane.github.io/ngx-datatable/