为什么全局搜索不适用于这个PrimeNG表？

Question

我正在使用PrimeNG开发一个角度应用程序。特别是，我正在使用PrimeNG p-table组件，并且在全局搜索中发现了一些问题。

这是组件：https://www.primefaces.org/primeng/showcase/#/table

这是与我的表相关的HTML代码：

<p-table #dtEmployee [value]="employeesList$ | async" 
            [(selection)]="selectedEmployees" dataKey="id" styleClass="p-datatable-employees" [rowHover]="true"
            [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading"
            [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
            [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
            <ng-template pTemplate="caption">
                <div class="table-header">
                    Lista impiegati
                    <span class="p-input-icon-left">
                        <i class="pi pi-search"></i>
                        <input pInputText type="text" (input)="dtEmployee.filterGlobal($event.target.value, 'contains')" placeholder="Global Search" />
                    </span>
                </div>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 3rem"></th>
                    <th pSortableColumn="firstName">Name <p-sortIcon field="firstName"></p-sortIcon></th>
                    <th pSortableColumn="socialSecurityCode">Codice fiscale <p-sortIcon field="socialSecurityCode"></p-sortIcon></th>
                    <th pSortableColumn="companyEmail">E-mail aziendale <p-sortIcon field="companyEmail"></p-sortIcon></th>
                    <th pSortableColumn="companyPhone">Telefono aziendale <p-sortIcon field="companyPhone"></p-sortIcon></th>
                    <th pSortableColumn="personalEmail">E-mail personale <p-sortIcon field="personalEmail"></p-sortIcon></th>
                    <th pSortableColumn="personalPhone">Telefono personale <p-sortIcon field="personalPhone"></p-sortIcon></th>
                   
                    <th style="width: 8rem"></th>
                </tr>

                <tr>
                    <th>
                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'firstName', 'startsWith')" placeholder="Cerca per nome" class="p-column-filter">
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'socialSecurityCode', 'startsWith')" placeholder="Cerca per codice fiscale" class="p-column-filter">
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'companyEmail', 'startsWith')" placeholder="Cerca per e-mail aziendale" class="p-column-filter">
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'companyPhone', 'startsWith')" placeholder="Cerca per e-mail personale" class="p-column-filter">
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'personalEmail', 'startsWith')" placeholder="Cerca per telefono aziendale" class="p-column-filter">
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'personalPhone', 'startsWith')" placeholder="Cerca per tenefono personale" class="p-column-filter">
                    </th>
                    
                    
                    <th></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-employee>
                <tr class="p-selectable-row">
                    <td>
                        <p-tableCheckbox [value]="employee"></p-tableCheckbox>
                    </td>
                    <td>
                        <span class="p-column-title">Nome</span>
                        {{employee.completeName}}
                    </td>
                    <td>
                        <span class="p-column-title">Codice fiscale</span>
                        <span class="image-text">{{employee.socialSecurityCode}}</span>
                    </td>
                    <td>
                        <span class="p-column-title">E-mail aziendale</span>
                        <span class="image-text">{{employee.companyEmail}}</span>
                    </td>
                    <td>
                        <span class="p-column-title">Telefono aziendale</span>
                        <span class="image-text">{{employee.companyPhone}}</span>
                    </td>
                    <td>
                        <span class="p-column-title">E-mail personale</span>
                        <span class="image-text">{{employee.personalEmail}}</span>
                    </td>
                    <td>
                        <span class="p-column-title">Telefono personale</span>
                        <span class="image-text">{{employee.personalPhone}}</span>
                    </td>
                    
                    
                    <td style="text-align: center">
                        <button pButton 
                                type="button" 
                                class="p-button-secondary centered-icon" 
                                icon="pi pi-info-circle"
                                (click)="showEmployeDetailsDialog(employee)">
                        </button>
                        <button pButton type="button" class="p-button-secondary centered-icon" icon="pi pi-cog"></button>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage">
                <tr>
                    <td colspan="3">Non sono stati trovati impiegati.</td>
                </tr>
            </ng-template>
    </p-table>

它呈现这一观点：

​

​

如您所见，表头包含每个字段的筛选器(这些搜索过滤器工作得很好)和突出显示的全局搜索筛选器字段。这不管用。实际上，如果我试图搜索某项内容，我总是会获得一个空表，在字段中搜索一个值--实际上我正在获得：

​

​

我在其他字段中获得相同的搜索信息的行为。

怎么啦？我遗漏了什么？我怎么才能试着修好它呢？

Answer 1

病毒帕特尔是正确的，你正在使用的例子的globalFilterFields。相反，指定要在搜索中包括的表字段：

[globalFilterFields]="['firstName','socialSecurityCode','companyEmail','companyPhone','personalEmail','personalPhone']

至于图标，它也为我做到了这一点。我这么做是为了避开它。它将图标放在搜索框的外部，但它比默认的要好。

你可以做placeholder=的“cerca dipendenti"，而不是placeholder=的”全球搜索“(如果谷歌翻译是值得信任的)。

<div class="d-flex align-items-center">
          <i class="fa fa-search mr-1"></i>
          <input
            type="text"
            pInputText
            size="30"
            placeholder="Search"
            (input)="dt.filterGlobal($event.target.value, 'contains')"
          />
</div>

Answer 2

由于您在globalFilterFields属性中传递了错误的文件，所以您的全局说教无法工作。globalFilterFields是作为字符串在全局筛选中使用的字段数组。所以你需要像下面这样设置

[globalFilterFields]="['firstName','socialSecurityCode','companyEmail','companyPhone','personalEmail','personalPhone']

Answer 3

图标在外部，因为没有导入以下模块。

从‘primeng/inputtext’导入{ InputTextModule }；