我有4个类别的数据。全部都加载到数据表中。过滤器工作正常。还是当用户只需要搜索基于特定类别的数据时,如何从视图中删除或隐藏其他数据并筛选结果?
有人帮我吗?
这是要求的屏幕截图:
她是我的html:
<div class="col-md-12">
<input type="checkbox" name="Education" id=""> Education
<input type="checkbox" name="Development" id=""> Development
<input type="checkbox" name="Medicine" id=""> Medicine
<p-table #tt [value]="values" [globalFilterFields]="['Id','Name','Description','CreatedDate']" sortField="Id" sortMode="single" [paginator]="true" [rows]="10">
<ng-template pTemplate="caption">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input type="text" pInputText size="50" placeholder="Global Filter" (input)="tt.filterGlobal($event.target.value, 'contains')" style="width:auto">
</ng-template>
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of cols" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
<tr>
<th *ngFor="let col of cols" [ngSwitch]="col.field">
<input *ngSwitchCase="'Id'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, 'contains')">
<input *ngSwitchCase="'Name'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, 'contains')">
<input *ngSwitchCase="'Description'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)">
<input *ngSwitchCase="'CreatedDate'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)">
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-value>
<tr>
<td *ngFor="let col of cols">
{{value[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="summary">
There are {{courseList?.length}} courses and ({{couseList?.length / 10 }} Pages)
</ng-template>
</p-table>
</div>