Я хочу отфильтровать столбец даты, используя средство выбора диапазона дат, используя угловые от 6 до p-таблицы - PullRequest
Новая
       15

Я хочу отфильтровать столбец даты, используя средство выбора диапазона дат, используя угловые от 6 до p-таблицы

0 голосов
/ 25 января 2019

На данный момент я загружаю данные p-таблицы со стороны сервера в пользовательский интерфейс, который содержит столбец даты и другие некоторые действия, выполняемые пользователем.Я могу успешно фильтровать, используя выпадающий список и по области поиска.Но я сталкиваюсь с проблемой при фильтрации столбца даты с использованием daterangepicker (p-calender). Я получаю сообщение об ошибке, так как filterconstraints не определено.

Я пытался использовать daterangepicker(p-calendar), и, выбирая дату, я написал audlog.component.ts, который имеет логику для фильтрации даты, которую выбрал пользователь

auditlog.component.html В приведенном ниже html-файле я использую p-календарь, который помогает пользователю выбрать датудиапазон между тем, что они хотят. И я добавил пользовательский фильтр к значению даты. Но я не могу отфильтровать значение даты. Я выкидываю ошибку в консоль и говорю, что 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**
...