Primeng表过滤器不适用于带有嵌套对象的列 [英] Primeng table filter not working on column with nested object
问题描述
我有一个Primeng表，该列的值是从嵌套对象中获取的.我无法使用该列值来过滤表.如果输入其他列中的值，则过滤器可以正常工作，请帮助.
I have a primeng table where on column value is obtained from a nested object.I am unable to filter the table using that column value.The filter works fine if enter value present in other columns.Please help.Thanks in advance.
这是我的打字稿:
this.cols = [
{ field: 'name', header: 'Name' },
{ field: 'email', header: 'Email' },
{ field: 'phnNumber', header: 'Contact No' },
{ field: 'grades[0].grade1', header: 'Grade' },
];
这是我的过滤器:
<div class="col-md-6">
<p-table [columns]="cols" #dt [value]="students" [autoLayout]="true" [paginator]="true" [rows]="10">
<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)="dt.filterGlobal($event.target.value, 'contains')" 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.grades[0].grade1}}</td>
</tr>
</ng-template>
</p-table>
</div>
如果输入成绩"列中存在的任何值，我将得到空响应.我认为使用grades [0] .grade1作为字段存在一些问题.
If I enter any value present in the grade column,I get empty response. I think there's some issue with using grades[0].grade1 as field.
JSON结构:
[
{
"name": "Test",
"email": null,
"phnNumber": 1,
"grades": [
{
"grade1": "A",
"grade2": "B"
}
]
}
]
Stackblitz- https://stackblitz.com/edit/angular-dbwfep
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.ts
import { 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: "abhinavkumar985@gmail.com",
phnNumber: "23456787654",
grades: [
{
grade1: "AA",
grade2: "X"
}
]
},
{
name: "Ravi",
email: "Ravi@gmail.com",
phnNumber: "1234543666",
grades: [
{
grade1: "CC",
grade2: "Y"
}
]
},
{
name: "Harsh",
email: "hardss@gmail.com",
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表过滤器不适用于带有嵌套对象的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
