如何在Turbo表PrimeNg中显示下拉选择状态？

问题描述

我设计了PrimeNg涡轮表<p-table>，可以通过多个下拉列表和自定义过滤器进行排序。我已决定支持通过存储的用户设置。

但是，我在填写<p-calendar>和<p-multiSelect>的默认值时遇到问题。我知道如何通过用户设置的状态填充input（因为它们位于PrimeNg documentation中）。但是我没有找到关于<p-calendar>和<p-multiSelect>的稳定状态的任何信息。

我需要[value]="dt.filters['description']?.value"中的<input>之类的<p-multislect>来获得用户稳定的状态；我需要知道如何影响输入组件...

          <input pInputText
                 type="text"
                 [style]="{'width':'100%'}"
                 (input)="dt.filter($event.target.value,'description','contains')"
                 [value]="dt.filters['description']?.value" <<=== Need this for calendar and multislect
                 placeholder="Description">

           <p-multiSelect [options]="statuses"
                 [style]="{'width':'100%'}"
                 (onChange)="dt.filter($event.value,'status','in')"
                 placeholder="Status">
           </p-multiSelect>

在official documentation，GitHub implementation thread或我已审查的多个StackOverflow问题中，我都找不到用于过滤组件的任何东西。

有人可以帮助我吗？有没有一种方法可以实现日历和多选状态？还是应该通过自定义解决方案来处理？

我附上p表以了解一个想法：

 <p-table
    #dt
    [value]="records"
    sortMode="multiple"
    [paginator]="true"
    [rowsPerPageOptions]="rowsPerPageTable"
    [rows]="rowsPerTable"
    [showCurrentPageReport]="true"
    [(first)]="page"
    [(selection)]="selectedRecordsInfo"
    styleClass="p-datatable-striped"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
    stateStorage="session"
    stateKey="p-table-USER_ID"
  >
    <ng-template pTemplate="header">
      <tr class="ui-table-thead">
        <th [ngStyle]="{'width':'14%'}" pSortableColumn="createdDate">Created <p-sortIcon field="createdDate"></p-sortIcon></th>
        <th [ngStyle]="{'width':'14%'}" pSortableColumn="type">Types <p-sortIcon field="type"></p-sortIcon></th>
        <th [ngStyle]="{'width':'14%'}" pSortableColumn="status">Status <p-sortIcon field="status"></p-sortIcon></th>
        <th [ngStyle]="{'width':'29%'}" pSortableColumn="description">Description <p-sortIcon field="description"></p-sortIcon></th>
        <th [ngStyle]="{'width':'29%'}" pSortableColumn="creatorNames">Creators <p-sortIcon field="creatorNames"></p-sortIcon></th>
      </tr>
      <tr class="ui-table-thead">
        <th>
          <p-calendar (onSelect)="onDateSelect($event)"
                      [style]="{'width':'100%'}"
                      selectionMode="range"
                      [readonlyInput]="true"
                      (onClearClick)="onDateClear()"
                      [showbuttonbar]="true"
                      placeholder="Created Date"
                      class="p-column-filter"
                      dateFormat="yy-mm-dd"></p-calendar>
        </th>
        <th>
          <p-multiSelect [options]="types"
                         [style]="{'width':'100%'}"
                         (onChange)="dt.filter($event.value,'type','in')"
                         placeholder="Type"></p-multiSelect>
        </th>
        <th>
          <p-multiSelect [options]="statuses"
                         [style]="{'width':'100%'}"
                         (onChange)="dt.filter($event.value,'in')"
                         placeholder="Status"></p-multiSelect>
        </th>
        <th>
          <input pInputText
                 type="text"
                 [style]="{'width':'100%'}"
                 (input)="dt.filter($event.target.value,'contains')"
                 [value]="dt.filters['description']?.value"
                 placeholder="Description">
        </th>
        <th>
          <p-multiSelect [options]="creators"
                         [style]="{'width':'100%'}"
                         (onChange)="dt.filter($event.value,'creatorNames','customFindCreatorFilter')"
                         placeholder="Creators"
                         optionLabel="name">

          </p-multiSelect>
        </th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-rowData>
      <tr ng-repeat="rowData in let-rowData">
        <td>{{ rowData.createdDate }}</td>
        <td>{{ rowData.type }}</button></td>
        <td>{{ rowData.status }}</td>
        <td>{{ rowData.description }}</td>
        <td>{{ rowData.creatorNames.join(",") }}</td>
    </ng-template>

  </p-table>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）