逗号分隔的关键字搜索
Comma separated keyword search
我正在使用过滤条件来过滤我 table 中的行。
<tr *ngFor="let result of mf.data | filter:filter; let i = index">
我们使用 ng2-search-filter
目前,它基于关键字进行过滤,但我想在以逗号分隔格式输入关键字时过滤行。
我如何更改上面的行以使其工作?
完整 table
<table id="groups" class="table table-bordered table-hover dataTable" [mfData]="resultData" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
[(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
<tr role="row">
<th> <mfDefaultSorter by="HostName">Host Name</mfDefaultSorter></th>
<!-- <th><mfDefaultSorter by="SupportDL">Support DL</mfDefaultSorter></th> -->
<th><mfDefaultSorter by="Connectivity">Connectivity</mfDefaultSorter></th>
<th><mfDefaultSorter by="RDPStatus">RDP Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="MemoryStatus">Memory Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="CPUStatus">CPU Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="ServiceStatus">Service Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="ServiceLogStatus">Service Log Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="DiskStatus">Disk Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="LogTime">Log Time</mfDefaultSorter></th>
<!-- <th>Actions</th> -->
</tr>
</thead>
<tbody *ngIf="resultData.length>0">
<tr *ngFor="let result of mf.data | filter:filter; let i = index">
<td>{{result.HostName}}</td>
<!-- <td>{{result.SupportDL}}</td> -->
<td>{{result.Connectivity}}</td>
<td>{{result.RDPStatus}}</td>
<td>{{result.MemoryStatus}}</td>
<td>{{result.CPUStatus}}</td>
<td><pre>{{result.ServiceStatus}}</pre></td>
<td>{{result.ServiceLogStatus}}</td>
<td><pre>{{result.DiskStatus}}</pre></td>
<td>{{result.LogTime}}</td>
</tr>
</tbody>
<tr *ngIf="resultData.length <=0"><td colspan="10"> No Data Found</td></tr>
<tfoot>
<tr>
<td colspan="8">
<mfBootstrapPaginator></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
如果过滤器是一个简单的输入:
<input type="query" [(ngModel)]="filter">
那你就不要改变你的 HTML。
由于您没有 post 您的实际过滤器(也没有将您之前的问题标记为已解决,顺便说一句谢谢您),我将使用我给您的过滤器并进行更改有点:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter',
pure: true
})
export class FilterPipe implements PipeTransform {
transform(items: Object[], args: string): any {
console.log(args);
if (!items || !items.length) { return []; }
if (!args) { return items; }
return items
.filter(item => Object.keys(item)
.some(key => args.split(',').some(arg => item[key].toLowerCase().includes(arg.toLowerCase())))
);
}
}
和here is a working stackblitz,以及它适用于图像的证明:
我正在使用过滤条件来过滤我 table 中的行。
<tr *ngFor="let result of mf.data | filter:filter; let i = index">
我们使用 ng2-search-filter
目前,它基于关键字进行过滤,但我想在以逗号分隔格式输入关键字时过滤行。
我如何更改上面的行以使其工作?
完整 table
<table id="groups" class="table table-bordered table-hover dataTable" [mfData]="resultData" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
[(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
<tr role="row">
<th> <mfDefaultSorter by="HostName">Host Name</mfDefaultSorter></th>
<!-- <th><mfDefaultSorter by="SupportDL">Support DL</mfDefaultSorter></th> -->
<th><mfDefaultSorter by="Connectivity">Connectivity</mfDefaultSorter></th>
<th><mfDefaultSorter by="RDPStatus">RDP Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="MemoryStatus">Memory Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="CPUStatus">CPU Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="ServiceStatus">Service Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="ServiceLogStatus">Service Log Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="DiskStatus">Disk Status</mfDefaultSorter></th>
<th><mfDefaultSorter by="LogTime">Log Time</mfDefaultSorter></th>
<!-- <th>Actions</th> -->
</tr>
</thead>
<tbody *ngIf="resultData.length>0">
<tr *ngFor="let result of mf.data | filter:filter; let i = index">
<td>{{result.HostName}}</td>
<!-- <td>{{result.SupportDL}}</td> -->
<td>{{result.Connectivity}}</td>
<td>{{result.RDPStatus}}</td>
<td>{{result.MemoryStatus}}</td>
<td>{{result.CPUStatus}}</td>
<td><pre>{{result.ServiceStatus}}</pre></td>
<td>{{result.ServiceLogStatus}}</td>
<td><pre>{{result.DiskStatus}}</pre></td>
<td>{{result.LogTime}}</td>
</tr>
</tbody>
<tr *ngIf="resultData.length <=0"><td colspan="10"> No Data Found</td></tr>
<tfoot>
<tr>
<td colspan="8">
<mfBootstrapPaginator></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
如果过滤器是一个简单的输入:
<input type="query" [(ngModel)]="filter">
那你就不要改变你的 HTML。
由于您没有 post 您的实际过滤器(也没有将您之前的问题标记为已解决,顺便说一句谢谢您),我将使用我给您的过滤器并进行更改有点:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter',
pure: true
})
export class FilterPipe implements PipeTransform {
transform(items: Object[], args: string): any {
console.log(args);
if (!items || !items.length) { return []; }
if (!args) { return items; }
return items
.filter(item => Object.keys(item)
.some(key => args.split(',').some(arg => item[key].toLowerCase().includes(arg.toLowerCase())))
);
}
}
和here is a working stackblitz,以及它适用于图像的证明: