我正在尝试使用 angular 10 的智能表添加和显示我的数据,其中一个表列是我安装 mydatepicker 的日期我制作了一个名为calendar
这是calendar.ts
import { Component, Input, OnInit } from '@angular/core';
import { IMyDpOptions, IMyDateModel } from 'mydatepicker';
import { ViewCell } from 'ng2-smart-table';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent {
public startDateOptions: IMyDpOptions = {
dateFormat: 'yyyy/mm/dd',
editableDateField: false,
openSelectorOnInputClick: true,
firstDayOfWeek: 'su',
satHighlight: true,
selectionTxtFontSize: '13px',
dayLabels: {
su: 'أح',
mo: 'اث',
tu: 'ث',
we: 'أر',
th: 'خ',
fr: 'ج',
sa: 'س',
},
monthLabels: {
1: 'جانفي',
2: 'فيفري',
3: 'مارس',
4: 'أفريل',
5: 'ماي',
6: 'جوان',
7: 'جويلية',
8: 'أوت',
9: 'سبتمبر',
10: 'أكتوبر',
11: 'نوفمبر',
12: 'ديسمبر',
},
height: '26px',
todayBtnTxt: "اليوم",
// disableSince: this.getCurrentDate()
};
public endDateOptions: IMyDpOptions = this.startDateOptions;
}
@Component({
template: {{value | date:'short'}} ,
})
export class CalendarRenderComponent implements ViewCell,OnInit {
@Input() value: string;
@Input() rowData: any;
constructor() { }
ngOnInit() { }
}
这就是我调用它的方式smart-table.ts
import { Component } from '@angular/core';
import { IMyDpOptions, IMyDateModel } from 'mydatepicker';
import { CalendarComponent, CalendarRenderComponent } from './calendar/calendar.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'grp';
settings = {
columns: {
id: {
title: 'id'
},
name: {
title: 'name'
},
username: {
title: 'username'
},
email: {
title: 'email'
},
birthday: {
title: 'Birthday',
type: 'custom',
renderComponent: CalendarRenderComponent,
width: '250px',
filter: false,
sortDirection: 'desc',
editor: {
type: 'custom',
component: CalendarComponent,
},
},
},
delete: {
deleteButtonContent: '<i class="fa fa-trash" style="font-size:32px"></i>',
saveButtonContent: 'save',
cancelButtonContent: 'cancel',
},
add: {
addButtonContent:'<i class="fa fa-plus" style="background-color: green;"></i>',
createButtonContent: '<i class="fa fa-check"></i>',
cancelButtonContent: '<i class="fa fa-times"></i>',
},
edit: {
editButtonContent:'<i class="fa fa-pencil" style="font-size:32px"></i>',
saveButtonContent:'<i class="fa fa-check"></i>',
cancelButtonContent: '<i class="fa fa-times"></i>',
},
};
data = [
{
id: 1,
name: "test Graham",
username: "Bret",
email: "test@april.com",
birthday: "2019-08-14T00:00:00"
},
{
id: 2,
name: "test Howell",
username: "test",
email: "test@gmail.tv",
birthday: "2019-08-14T00:45:51"
},
{
id: 11,
name: "testDuBuque",
username: "test.Stanton",
email: "test@test.biz",
birthday: "2019-08-14T00:45:51"
}
];
}
我在单击添加新时显示日历和选择日期没有问题,
但是当我单击创建时,除日期外,所有数据都显示正常,它是空白的。在控制台中,我得到了ERROR Error: The pipe 'date' could not be found!
我非常感谢您的帮助