问题描述
我正在开发一个带有 PrimeNG 表的 SPA 来显示记录,并且每列都有一个用于其数据的过滤器。
其中之一是日期记录,它以 ISO 字符串形式出现,并在被提供给表本身之前转换为日期对象。
我需要日期格式为“dd/MM/yyyy”,默认情况下,日期的 p-columnFilter 与“MM/dd/yyyy”一起使用,所以我使用过滤器的 pTemplate 来自定义格式在日历中。
<ng-template ngFor let-col [ngForOf]="columns">
<th *ngIf="col.type !== 'date'" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
<th *ngIf="col.type === 'date'" class="obe-table__date-header" [pSortableColumn]="col.field" [attr.rowspan]="2">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
<p-columnFilter type="date" [field]="col.field" display="menu">
<ng-template pTemplate="filter">
<p-calendar dateFormat="dd/mm/yy"></p-calendar>
</ng-template>
</p-columnFilter>
</th>
</ng-template>
然后,当显示过滤器 UI 并单击“应用”时,它就好像没有注册该值一样。我在想我在日历中缺少 [ngModel] 绑定,但我也尝试过,但没有成功。
提前致谢。
解决方法
缺少您对该函数的调用:
(onSelect)="filter($event)"
不要忘记在 ng-template 中:
let-filter="filterCallback"
它给出了这个:
<p-columnFilter type="date" [field]="col.field" display="menu">
<ng-template pTemplate="filter" let-filter="filterCallback">
<p-calendar dateFormat="dd/mm/yy" (onSelect)="filter($event)"></p-
calendar>
</ng-template>
</p-columnFilter>