Primeng表过滤器​​不适用于带有嵌套对象的列

Stackblitz- https://stackblitz.com/edit/angular-dbwfep推荐答案您可以在列配置中使用name [0] .grade作为字段属性.它可以是任何嵌套对象.过滤器正在工作.You can use name[0].grade as filed property in column configuration. It can be any nested object. Filter is working.事实是表上的数据应具有相同的属性.The fact is that data on the table should the same property. 更新:您必须实现表格的自定义排序和过滤方法.排序是动态的，因为我们知道要基于click事件对哪个字段的用户进行排序，因此识别键很容易.但是在我们不知道的过滤器中，该过滤器适用于所有字段，因此，到目前为止，我已经使用"grade1"字段进行过滤，您可以添加尽可能多的字段并在过滤器之后删除.Update: You have to implement custom sorting and filter method of the table. Sorting is dynamic, as we know on which filed user want to sort based on click event, identifying the key is easy. But in the filter we don't know, the filter works for all the fields, so I have taken the 'grade1' field as of now to filter, you can add as many as field and remove after the filter.我想在嵌套对象的情况下，默认情况下它不起作用，因此您必须添加自定义实现.希望这会有所帮助.I guess in case of a nested object, it doesn't work default, so you have to add custom implementation. Hope this helps. component.html component.html<hello name="{{ title }}"></hello><div class="col-md-6"> <p-table [columns]="cols" #dt [value]="students" [autoLayout]="true" [paginator]="true" [rows]="10" (onSort)="onSort($event)"> <ng-template pTemplate="caption"> <div style="text-align: right"> <i class="fa fa-search" style="margin:4px 4px 0 0"></i> <input type="text" pInputText size="30" placeholder="Search" (input)="myFilter($event)" class="filter"> </div> </ng-template> <ng-template pTemplate="header" let-columns> <tr> <th class="row-header" *ngFor="let col of columns" [pSortableColumn]="col.field"> {{col.header}} <p-sortIcon class="" [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"> </p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-student let-columns="columns"> <tr class="center-text"> <td class="row-cell">{{student.name}}</td> <td class="row-cell"> {{student.email}} </td> <td class="row-cell"> {{student.phnNumber}} </td> <td class="row-cell">{{student.grades[0].grade1}}</td> </tr> </ng-template> </p-table></div> component.ts component.tsimport { FormControl, FormGroup } from "@angular/forms";import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';@Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"]})export class AppComponent { title = "Filter in Table"; cols = []; grades = [{ grade1: "grade1", grade2: "grade2" }]; students = []; @ViewChild('dt',{read: '',static:true}) dt: any; constructor() { this.cols = [ { field: "name", header: "Name" }, { field: "email", header: "Email" }, { field: "phnNumber", header: "Contact No" }, { field: this.grades[0]["grade1"], header: "Grade1" } ]; this.students = [ { name: "Abhinav", email: "[email protected]", phnNumber: "23456787654", grades: [ { grade1: "AA", grade2: "X" } ] }, { name: "Ravi", email: "[email protected]", phnNumber: "1234543666", grades: [ { grade1: "CC", grade2: "Y" } ] }, { name: "Harsh", email: "[email protected]", phnNumber: "23212324", grades: [ { grade1: "BB", grade2: "Z" } ] } ]; } myFilter(e){ this.dt.value.forEach((e)=>{ e['grade1'] = e['grades'][0]['grade1']; }); this.dt.filterGlobal(e.target.value, 'contains'); setTimeout(()=>{ this.dt.value.forEach((e)=>{ delete e['grade1']; }); },500) } onSort(e){ let filed = e.field; let arr = [...this.students]; if(filed === 'grade1'){ // custome sort only for these fields let order = e.order; // 1 means abc and -1 means cba if(order === 1){ this.students.sort( this.OrderListBy(filed) ); }else{ this.students.sort( this.OrderListBy(filed) ).reverse(); } } } OrderListBy(prop) { return function (a, b) { if (a['grades'][0][prop] > b['grades'][0][prop]) { return 1; } else if (a['grades'][0][prop] < b['grades'][0][prop]) { return -1; } return 0; } }} 查看更新的工作示例 这篇关于Primeng表过滤器​​不适用于带有嵌套对象的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！