我想使用日期范围选择器通过p表通过角度6过滤日期列

Question

到目前为止，我正在将p表数据从服务器端加载到UI，其中包含日期列和用户执行的其他一些操作。我能够使用下拉列表和按搜索区域成功过滤。但是我在使用daterangepicker（p-calender）过滤日期列时遇到了问题。我收到了像filterconstraints一样的错误未定义。

我尝试使用daterangepicker(p-calendar)，并且在选择日期时，我编写了auditlog.component.ts，该文件具有过滤用户选择的日期的逻辑

auditlog.component.html 在下面的html文件中，我正在使用p-calendar，它可以帮助用户选择他们想要的日期之间的日期范围。并且我向日期值添加了自定义文件过滤器，但是我无法过滤日期值。我抛出了错误在控制台中，它说filterconstarainst是未定义的。

<div class="ui-g" *ngIf="auditLogs.length !== 0">
    <p-table #dt [autoLayout]="true" [columns]="cols"  [value]="auditLogs" [paginator]="true" [rows]="15"  sortField= "createdDate" sortOrder="-1">
        <ng-template pTemplate="header" let-columns>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field" id="auditLog">{{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
            </tr>
            <tr>
                <th *ngFor="let col of columns" [ngSwitch]="col.field">
                    <div *ngIf=" col.field === 'userId' ||  col.field === 'entityName'  ||  col.field === 'entityIdentifier'  ||  col.field === 'remarks'">
                        <input  type="text" placeholder="search : {{col.header}}" (input)="dt.filter($event.target.value, col.field,'contains')"/><br>  
                    </div>                             
                    <p-dropdown *ngSwitchCase="'action'" [options]="actions"  appendTo="body" [style]="{'width':'100%'}"  (onChange)="dt.filter($event.value,col.field,col.filterMatchMode);getFilteredOutput(event,dt)"  styleClass="ui-column-filter"></p-dropdown>
                    <p-calendar   [(ngModel)]="dateFilter" appendTo="body"
                        *ngSwitchCase="'createdDate'"
                        selectionMode="range"
                        [readonlyInput]="false"
                        dateFormat="dd.mm.yy"
                        (onSelect)="dt.filter($event, col.field, 'dateRangeFilter')">
                    </p-calendar>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-request let-columns="columns">
            <tr>
                <td *ngFor="let col of columns;">
                    <span *ngIf="col.field === 'createdDate'">{{request[col.field] | date}}</span>
                    <span *ngIf="col.field !== 'createdDate'">{{request[col.field]}}</span>
                </td>
            </tr>
        </ng-template>
    </p-table>              
</div>

auditlog.component.ts

export class AuditLogComponent implements OnInit {
    @ViewChild('dt') private _table: Table;

    cols: any[];
    auditLogs = [] as AuditLog[];
    num = 1;
    actions: SelectItem[];
    dateFilters: any;
    constructor(private adminService: AdminService) { }

    ngOnInit() {    
        var _self = this;
        this.auditLogs = [];
        this.cols = [
            { field: 'userId', header: 'UserId' },
            { field: 'action', header: 'Action' },
            { field: 'entityName', header: 'Entity Name' },
            { field: 'entityIdentifier', header: 'Entity Identifier' },
            { field: 'createdDate', header: 'Created Date' },
            { field: 'remarks', header: 'Remarks' },
        ];
        this.actions = [
            { label: 'Any', value: null },
            { label: 'Insert', value: 'Insert' },
            { label: 'Update', value: 'Update' },
            { label: 'Delete', value: 'Delete' },
        ];

        this.adminService.getAuditLogs().subscribe(data => {
            data.forEach(element => {
                const row = {} as AuditLog;
                row.userId = element.userId;
                row.action = element.action;
                row.entityName = element.entityName;
                row.entityIdentifier = element.entityIdentifier;
                row.createdDate = element.createdDate;
                row.remarks = element.remarks;
                this.auditLogs.push(row);
            });
        });


        // this will be called from your templates onSelect event
        this._table.filterConstraints['dateRangeFilter'] = (value, filter): boolean => {
            // get the from/start value
            var s = _self.dateFilters[0].getTime();
            var e;
            // the to/end value might not be set
            // use the from/start date and add 1 day
            // or the to/end date and add 1 day
            if (_self.dateFilters[1]) {
                e = _self.dateFilters[1].getTime() + 86400000;
            } else {
                e = s + 86400000;
            }
            // compare it to the actual values
            return value.getTime() >= s && value.getTime() <= e;
            // return value.getTime() == filter.getTime();

        }
    }



So here i want to filter the date based on the rang the user selected.But i am geeting the error this._table.filterconstrainst is undefined**