代码之家 › 专栏 › 技术社区 › SmartestVEGA

逗号分隔关键字搜索

angular2-directives pipe angular

SmartestVEGA · 技术社区 · 6 年前

我正在使用筛选条件筛选表中的行。

<tr *ngFor="let result  of mf.data | filter:filter; let i = index">

我们使用NG2搜索过滤器

目前,它的过滤基于关键字,但我想过滤行时,我输入的关键字以逗号分隔的格式。

如何更改上述行以使其正常工作?

整张桌子

<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>

1 回复 | 直到 6 年前

Maryannah 6 年前

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