Question

这是我的专栏：

<p-column header="Roles" sortable="true" [filter]="true" filterMatchMode="contains">
  <ng-template let-user="rowData" pTemplate="body">
    <div *ngFor="let role of user.roles">
      {{role.name}}
    </div>
  </ng-template>
</p-column>

user.roles JSON的示例：

[ { "id": 3, "name": "A single role" } ]
[ { "id": 4, "name": "A role name" }, { "id": 6, "name": "Another role name" } ]

我想在其上添加一个过滤器 - 我尝试添加此ng-template：

<ng-template pTemplate="filter" let-col let-test="rowData">
        <p-multiSelect [options]="roles" defaultLabel="All roles" (onChange)="dt.filter($event.value,test.roles,col.filterMatchMode)"
          styleClass="ui-column-filter"></p-multiSelect>
 </ng-template>

multiselect的选项位于一个单独的角色数组中：

this.roles = [];
this.roles.push({ label: 'A role', value: 'aRole' });
this.roles.push({ label: 'Another role', value: 'anotherRole' });

...但由于某种原因，我收到了这个错误：

无法阅读属性＆＃39;角色＆＃39;未定义的

我怎样才能做到这一点？
如何调试内联函数调用，如dt.filter（$ event.value，test.roles，col.filterMatchMode）？
我认为我的主要问题是我的专栏没有＆＃34;字段＆＃34;可用于过滤的值。

Answer 1

根据官方论坛，我想要的是不可能的。 A＆＃34;字段＆＃34;是必须的。作为一种解决方法，我将我的角色数组扁平化为一个字符串并在一个字段中显示。我现在可以使用matchmode过滤它＆＃34;包含＆＃34;

Answer 2

试试这样：

检查你的primeng node_module版本是做4.2.1 primeng

<强> module.ts

导入DataTableModule和MultiSelectModule喜欢你的app.module文件

import { DataTableModule, MultiSelectModule } from 'primeng/primeng';

@NgModule({
    imports: [
        DataTableModule,
        MultiSelectModule
    ]
})

<强> component.ts

export class AppComponent implements OnInit {

    private users: Array<any> = [];
    private roles: Array<any> = [];

    constructor() { }

    ngOnInit() {
        this.users = [];
        this.users.push({ "id": 3, "name": "anotherRole" });
        this.users.push({ "id": 4, "name": "aRole" }, { "id": 6, "name": "anotherRole" });


        this.roles = [];
        this.roles.push({ label: 'A role', value: 'aRole' });
        this.roles.push({ label: 'Another role', value: 'anotherRole' });
    }
}

<强> component.html

<p-dataTable [value]="users" [rows]="4" [paginator]="true" [globalFilter]="gb" #dt>
<p-header>List of Cars</p-header>
<p-column field="id" header="ID"></p-column>
<p-column field="name" header="Name" [filter]="true" filterMatchMode="in">
    <ng-template pTemplate="filter" let-col>
        <p-multiSelect [options]="roles" defaultLabel="All Colors" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
    </ng-template>
</p-column>
</p-dataTable>

如何使用ng-template过滤PrimeNg DataTable列？

2 个答案: