逗号分隔的关键字搜索

Question

我正在使用过滤条件过滤表中的行。

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

我们使用 ng2-search-filter

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

如何更改上面的行以使其正常工作？

全桌

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

Answer 1

如果过滤器是一个简单的输入：

<input type="query" [(ngModel)]="filter">

那么你就不用改变你的 HTML 了。

由于您没有发布您的实际过滤器（并且没有将您之前的问题标记为已解决，顺便说一句，谢谢您），我将使用我给您的过滤器并稍作更改：

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，以及它适用于图像的证明：