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

如果filter是一个简单的输入：

<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以及它与图像配合使用的证明：

逗号分隔的关键字搜索

1 个答案: