Angular 2 管道 ShortDate on NGX 数据 Table
Angular 2 Pipe ShortDate on NGX Data Table
我想在 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>
您可以只使用 date pipe
来格式化值。
{{value | date:'shortDate'}}
等同于 {{value | date:'ymd'}}
输出如下日期:22/08/2017
你的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
希望对您有所帮助
<ng-template #dateColumn let-row="row" let-value="value" let-i="index">
{{value | date:'dd-MM-yyyy'}}
</ng-template>
export class CvbankListComponent implements OnInit {
@ViewChild('dateColumn') dateColumn: TemplateRef<any>;
.
.
.
this.columns = [
.
.
{ name: 'Date', prop: 'Date', cellTemplate: this.dateColumn },
];
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')};
}
您始终可以使用编程方法来应用管道,事实上您可以使用此方法创建自定义管道。
ngx-dataTable 中的管道 @Input
需要一个带有 transform: Function 的 Pipelike 结构。您可以将任何函数设为 returns 转换函数并根据需要操作数据。
我认为这种在列配置上使用 pipe
属性 的方式非常干净(不确定 Angular 2 是否能够像 OP 要求的那样处理这个问题,但是 Angular 10 可以)
class DateOnlyPipe extends DatePipe {
public transform(value): any {
return super.transform(value, 'MM/dd/y');
}
}
const columns = [{
name: 'Date',
prop: 'dateReported',
pipe: new DateOnlyPipe('en-US')
}];
来源:https://github.com/swimlane/ngx-datatable/issues/401#issuecomment-311635384
我想在 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>
您可以只使用 date pipe
来格式化值。
{{value | date:'shortDate'}}
等同于 {{value | date:'ymd'}}
输出如下日期:22/08/2017
你的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
希望对您有所帮助
<ng-template #dateColumn let-row="row" let-value="value" let-i="index">
{{value | date:'dd-MM-yyyy'}}
</ng-template>
export class CvbankListComponent implements OnInit {
@ViewChild('dateColumn') dateColumn: TemplateRef<any>;
.
.
.
this.columns = [
.
.
{ name: 'Date', prop: 'Date', cellTemplate: this.dateColumn },
];
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')};
}
您始终可以使用编程方法来应用管道,事实上您可以使用此方法创建自定义管道。
ngx-dataTable 中的管道 @Input
需要一个带有 transform: Function 的 Pipelike 结构。您可以将任何函数设为 returns 转换函数并根据需要操作数据。
我认为这种在列配置上使用 pipe
属性 的方式非常干净(不确定 Angular 2 是否能够像 OP 要求的那样处理这个问题,但是 Angular 10 可以)
class DateOnlyPipe extends DatePipe {
public transform(value): any {
return super.transform(value, 'MM/dd/y');
}
}
const columns = [{
name: 'Date',
prop: 'dateReported',
pipe: new DateOnlyPipe('en-US')
}];
来源:https://github.com/swimlane/ngx-datatable/issues/401#issuecomment-311635384