Как привязать элемент управления календаря от primeng к столбцам таблицы, используя V9 элемента управления - PullRequest
Новая
       34

Как привязать элемент управления календаря от primeng к столбцам таблицы, используя V9 элемента управления

0 голосов
/ 20 марта 2020

У меня есть таблица PrimeNg с заголовком и телом. Заголовок имеет вид: 

<p-table id="tblRequestResponse" name="tblRequestResponse" [value]="requestResponseSummaries" [rows]="10" [paginator]="true" [columns]="cols" sortField="dateTime" [pageLinks]="3" selectionMode="single" sortOrder="-1" #dt>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col.field" [ngSwitch]="col.field">
          <div *ngSwitchCase="'id'">
            {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon>
            <p>
              <input pInputText type="text" (input)="dt.filter($event.target.value, col.field,'contains')" styleClass="ui-column-filter" />
            </p>
          </div>
          <div *ngSwitchCase="'dateTime'">
            {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon>
              <p-calendar appendTo="body" styleClass="ui-column-filter" dateFormat="dd/mm/yy" [(ngModel)]="filterValue[col.field]" (onSelect)="dt.filter($event,col.field,col.filterMatchMode)" (input)="dt.filter($event.target.value,col.field,col.filterMatchMode)"></p-calendar>
          </div>
          <div *ngSwitchCase="'process'">
            {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon>
            <p>
              <p-dropdown appendTo="body" editable="true" [(ngModel)]="filterValue[col.field]" [options]="searchOptions.processOptions" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
            </p>
          </div>
          <div *ngSwitchCase="'requestorIdentity'">
            {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon>
            <p>
              <input pInputText type="text" (input)="dt.filter($event.target.value, col.field,'contains')" styleClass="ui-column-filter" />
            </p>
          </div>
        </th>
      </tr>
    </ng-template>

, а тело: 

<ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr>
        <td *ngFor="let col of columns" [ngSwitch]="col.field">
          <div *ngSwitchCase="'id'">
            {{rowData[col.field]}}
          </div>
          <div *ngSwitchCase="'dateTime'">
            {{rowData[col.field] | datexutc:'DD/MM/YYYY HH:mm:ss'}}
          </div>
          <div *ngSwitchCase="'process'">
            {{rowData[col.field]}}
          </div>
          <div *ngSwitchCase="'requestorIdentity'">
            {{rowData[col.field]}}
          </div>

        </td>
      </tr>
    </ng-template>

Моя сортировка столбцов с использованием тегов p-sortIcon в сетке - все работы и фильтрация работают для всех моих столбцов, кроме столбец даты ().

Мой код на данный момент правильно отображает элемент управления календаря, но когда я выбираю дату, сетка не отображает отфильтрованные данные, когда я выбираю правильную дату. Может кто-нибудь посоветовать, что еще мне нужно сделать в моем столбце даты, чтобы он правильно фильтровал этот столбец. На сайте PrimeNG для этого недостаточно документации.

...