我使用ag-grid与angular 8。在我的表中，我有一个列，我想在短格式显示日期，所以我使用了Angular日期管道，但它不工作。这里是代码和下面的错误。
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
@ViewChild('agGrid', {static: true}) agGrid: AgGridAngular;
rowData: Bidon[] = [];
columnDefs = [
{headerName: 'PostId', field: 'postId', sortable: true, filter: true, checkboxSelection: true},
{headerName: 'Id', field: 'id', sortable: true, filter: true},
{headerName: 'Name', field: 'name', sortable: true, filter: true},
{headerName: 'Email', field: 'email', sortable: true, filter: true},
{headerName: 'Body', field: 'body', sortable: true, filter: true},
{headerName: 'Date Bidon 1', field: 'dateBindon1', sortable: true, filter: true, valueFormatter: this.datePipeFormatter},
{headerName: 'Date bidon 2', field: 'dateBidon2', sortable: true, filter: true},
{headerName: 'Price', field: 'price', sortable: true, filter: true, valueFormatter: this.currencyFormatter}
];
constructor(private bidonService: BidonService, private datePipe: DatePipe) {
}
ngOnInit() {
this.rowData = this.bidonService.bidons;
console.log(this.datePipe.transform(new Date(), 'short'));
}
getSelectedRows() {
const selectedNodes = this.agGrid.api.getSelectedNodes();
const selectedData = selectedNodes.map(node => node.data);
const selectedDataStringPresentation = selectedData.map(node => 'Name: ' + node.name + ' Email: ' + node.email).join(', ');
console.log(`Selected nodes: ${selectedDataStringPresentation}`);
}
currencyFormatter(params) {
console.log(params);
return params.value + '$';
}
datePipeFormatter(params) {
return this.datePipe.transform(params.value, 'short');
}
}
2条答案
按热度按时间91zkwejq1#
由于valueFormatter是由ag-grid调用的，因此会丢失
this上下文，必须绑定它。使用
bind：或者使用箭头功能：
zpgglvta2#
代码的问题与为columnDefs数组中的Date Bidon 1列定义的valueFormatter函数有关。您正在传递this.datePipeFormatter作为值格式化程序，但函数中的this关键字引用函数本身，而不是组件示例，因此datePipe服务不可用。
要解决这个问题，可以为datePipeFormatter函数使用箭头函数，它将保留组件示例的this上下文。下面是如何修改代码：
这应该可以解决日期管道无法工作的问题。请注意，您还应该在组件中导入DatePipe：
并确保它包含在模块的providers数组中：
通过这些修改，日期应使用短格式正确格式化。
如果你发现任何问题，然后在这里发表评论，我将尝试解决这些问题也。