时间戳

首页 > 解决方案 > 如何在primeng表中使用ng2搜索过滤器

html - 如何在primeng表中使用ng2搜索过滤器

问题描述

我想在更改下拉值时显示表格数据。例如，如果我将排名下拉值更改为“A”，那么表格应该只显示排名 A 数据。目前，我正在使用角度启动材料。在我得到问题表数据加倍错误之前以及在我使用“let-pjt”解决该问题之后，我无法使用“ng2 搜索过滤器”选项。

组件.html


 <div class="col">
                    <p-dropdown [options]="rankArr" name="rank" [(ngModel)]="project.rank" optionLabel="rank" optionValue="rank" [style]="{'width':'100%'}" placeholder="{{'placeholder.rank' | translate}}"></p-dropdown>
                </div>

<div class="table" style="margin-right: 15px; overflow-x:auto;">
            <p-table [value]="projects" styleClass="p-datatable-gridlines" responsiveLayout="scroll" scrollHeight="17.8vw">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="text-align: center;" translate>itemlist.customer <br> itemlist.name</th>
                        <th style="text-align: center;" translate>itemlist.project <br> itemlist.name</th>
                        <th style="text-align: center;" translate>itemlist.business <br> itemlist.divition</th>
                        <th style="text-align: center;" translate>itemlist.rank</th>
                        <th style="text-align: center;" translate>itemlist.order <br> itemlist.amount</th>
                        <th style="text-align: center;" translate>itemlist.customer <br> itemlist.area</th>
                        <th style="text-align: center;" translate>itemlist.sales <br> itemlist.incharge</th>
                        <th style="text-align: center;" translate>itemlist.incharge<br> itemlist.pm</th>
                        <th style="text-align: center;" translate>itemlist.incharge<br> itemlist.pl</th>
                        <th style="text-align: center;" translate>itemlist.update <br> itemlist.date</th>
                        <th style="text-align: center;" translate>itemlist.updater</th>
                        <th style="text-align: center;" translate>itemlist.process</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-pjt> 
                    <tr>

                        <td style="text-align: center;">{{ pjt.customer_name }}</td>
                        <td style="text-align: center; width: 15vw;">{{ pjt.project_name_jp }}</td>
                        <td style="text-align: center;">{{ pjt.business_divition }}</td>
                        <td style="text-align: center;">{{ pjt.rank }}</td>
                        <td style="text-align: center;">{{ pjt.order_amount }}</td>
                        <td style="text-align: center;">{{ pjt.customer_area }}</td>
                        <td style="text-align: center;">{{ pjt.sales_in_charge }}</td>
                        <td style="text-align: center;">{{ pjt.in_charge_pm }}</td>
                        <td style="text-align: center;">{{ pjt.in_charge_pl }}</td>
                        <td style="text-align: center;">{{ pjt.updated_at }}</td>
                        <td style="text-align: center;">{{ pjt.updated_by }}</td>
                        <td style="text-align: center; width: 70vw;">
                            <button pButton pRipple routerLink="item-register/{{ pjt.id }}" type="button" class="p-button-outlined p-button-secondary" translate>itemlist.actual <br> itemlist.input</button>&nbsp;
                            <button pButton pRipple type="button" translate="itemlist.duplicate" class="p-button-outlined"></button> &nbsp;
                            <button pButton pRipple (click)="deleteProject(pjt.id)" type="button" translate="itemlist.delete" class="p-button-outlined p-button-danger"></button>
                        </td>
                    </tr>
                </ng-template>
            </p-table>

在我可以使用下面的代码进行搜索之前，表数据翻了一番。

<ng-template pTemplate="body" > 
                    <tr *ngFor="let pjt of projects | filter:project.rank | filter:project.business_divition | filter:project.in_charge_area 
                    | filter:project.customer_area | filter:project.in_charge_pm | filter:project.in_charge_pl | filter:project.sales_in_charge
                    | filter:project.updated_by | filter:project.customer_name">

                        <td style="text-align: center;">{{ pjt.customer_name }}</td>
                        <td style="text-align: center; width: 15vw;">{{ pjt.project_name_jp }}</td>
                        <td style="text-align: center;">{{ pjt.business_divition }}</td>
                        <td style="text-align: center;">{{ pjt.rank }}</td>
                        <td style="text-align: center;">{{ pjt.order_amount }}</td>
                        <td style="text-align: center;">{{ pjt.customer_area }}</td>
                        <td style="text-align: center;">{{ pjt.sales_in_charge }}</td>
                        <td style="text-align: center;">{{ pjt.in_charge_pm }}</td>
                        <td style="text-align: center;">{{ pjt.in_charge_pl }}</td>
                        <td style="text-align: center;">{{ pjt.updated_at }}</td>
                        <td style="text-align: center;">{{ pjt.updated_by }}</td>
                        <td style="text-align: center; width: 70vw;">
                            <button pButton pRipple routerLink="item-register/{{ pjt.id }}" type="button" class="p-button-outlined p-button-secondary" translate>itemlist.actual <br> itemlist.input</button>&nbsp;
                            <button pButton pRipple type="button" translate="itemlist.duplicate" class="p-button-outlined"></button> &nbsp;
                            <button pButton pRipple (click)="deleteProject(pjt.id)" type="button" translate="itemlist.delete" class="p-button-outlined p-button-danger"></button>
                        </td>
                    </tr>
                </ng-template>

标签： htmlangulartypescriptprimeng

解决方案

实际上，在您的情况下，我经常将过滤器或业务代码拆分为打字稿组件，并尝试使模板尽可能干净。

所以我将使用带有上下文对象的函数来查询/过滤列表项目。

let filterObj = {
 rank: '',....
};
getProjects(){
 return projects.filter(e=> e.rank == filterObj.rank);
}

然后对于下拉框，我将添加事件 onChange 以应用新的 filterObj 等级。

onChangeRank(e){
  this.filterObj.rank = e;
}

所以在模板中会更简单：

<tr *ngFor="let pjt of getProjects()">

推荐阅读