在primeng Datatable自定义过滤器不起作用答案

【问题标题】：In primeng Datatable custom filter not working在primeng Datatable自定义过滤器不起作用
【发布时间】：2017-09-15 18:29:02
【问题描述】：

我有一个包含 Org 列的数据表。不同的组织列表位于数组中。如何在列过滤器下拉框中添加此列表。当我尝试使用列表添加选项时，下拉显示没有值。有人可以告诉我如何在下拉列表中添加动态值吗？

<p-column  field="org" header ="Org" [sortable]="true" [filter]="true" filterMatchMode="equals">
        <ng-template pTemplate="filter" let-col>
          <p-dropdown [options]="orgGroupList" [style]="{'width':'100%'}"  styleClass="ui-column-filter"></p-dropdown>
        </ng-template>
      </p-column>


this.orgGroupList = 2,3,4,5,6,7

【问题讨论】：

标签： angular primeng primeng-datatable

【解决方案1】：

[options] 应该是SelectItem 接口对象的数组。每个项目都应包含标签和值属性：

{label: 'MyDisplayValue', value: 1}

在您的代码中，您将整数数组 (this.orgGroupList = 2,3,4,5,6,7) 作为 [options] 输入传递。将其更改为SelectItem 接口对象的数组。

作为参考，您可以在以下位置查看官方示例源代码： https://www.primefaces.org/primeng/#/datatable/filter

【讨论】：

我假设你的代码是this.orgGroupList = [2,3,4,5,6,7]

【解决方案2】：

在下拉标签中包含 appendTo="body" 后它起作用了

<ng-template pTemplate="filter" let-col>
          <p-dropdown [options]="orgs" [(ngModel)]="selectedOrg" appendTo="body" [style]="{'width':'100%'}"  (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
        </ng-template>

【讨论】：