typescript PrimeNG 动态列过滤
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48916946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PrimeNG Dynamic Column Filtering
提问by Josh
I currently have the following PrimeNG TurboTable:
我目前有以下 PrimeNG TurboTable：
<p-table [value]="People" >
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Age</th>
<th>Height</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-col>
<tr>
<td>{{col.Name}}</td>
<td>{{col.Age}}</td>
<td>{{col.Height}}</td>
</tr>
</ng-template>
</p-table>
I need to be able to filter by the Age column when the page loads, how would I do this? All the examples I could find show use an (input) or (onChange) tag like so (taken from their website):
我需要能够在页面加载时按年龄列进行过滤，我该怎么做？我能找到的所有示例都使用了 (input) 或 (onChange) 标签，如下所示（取自他们的网站）：
<input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
How can I filter by column on load rather than on an element changing?
如何在加载时按列而不是元素更改进行过滤？
Here's the page I'm referencing: https://www.primefaces.org/primeng/#/table/filter
这是我引用的页面：https: //www.primefaces.org/primeng/#/table/filter
Thank you!
谢谢！
回答by Shailesh Sangekar
When you use static columns you have to specify the column name for the filter at the table level. Add [globalFilterFields]="['Age']" at table level.
当您使用静态列时，您必须在表级别为过滤器指定列名。在表级别添加 [globalFilterFields]="['Age']"。
<p-table #dt [value]="data" [globalFilterFields]="['Age']">
<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="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')"
style="width:auto">
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Age</th>
<th>Height</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-col>
<tr>
<td>{{col.Name}}</td>
<td>{{col.Age}}</td>
<td>{{col.Height}}</td>
</tr>
</ng-template>
</p-table>
回答by Abhijit Muke
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
<tr>
<th *ngFor="let col of columns" [ngSwitch]="col.field">
<input *ngSwitchCase="'vin'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
<div *ngSwitchCase="'year'">
{{yearFilter}}
<i class="fa fa-close" (click)="yearFilter=null;dt.filter(null, col.field, col.filterMatchMode)" style="cursor:pointer"></i>
<p-slider [style]="{'width':'100%','margin-top':'8px'}" [(ngModel)]="yearFilter" [min]="1970" [max]="2010" (onChange)="onYearChange($event, dt)"></p-slider>
</div>
<p-dropdown *ngSwitchCase="'brand'" [options]="brands" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value, col.field, 'equals')"></p-dropdown>
<p-multiSelect *ngSwitchCase="'color'" [options]="colors" defaultLabel="All Colors" (onChange)="dt.filter($event.value, col.field, 'in')"></p-multiSelect>
</th>
</tr>
</ng-template>
For Global Filter - (input)="dt.filterGlobal($event.target.value, 'contains')"
对于全局过滤器 - (input)="dt.filterGlobal($event.target.value, 'contains')"
For Column Filter - (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)"
对于列过滤器 - (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)"
