ng2 搜索 pipe 一列過濾器

Question

我在我的 Angular 8（是的，我知道...）項目上使用 ng2 search pipe 來過濾搜索結果。 問題是搜索適用於我所有表的列，我只希望它過濾項目的名稱。

這是我的搜索欄：

<input type="search" class="m-auto form-control" placeholder="Search" [(ngModel)]="rechercheprojets">

我的桌子：

          <tbody>
            <tr *ngFor="let hrProject of (hrPointagesProjects1 | filter:rechercheprojets)">
              <td>
                <i class="material-icons">assignment</i>
                {{ hrProject.Project }}
              </td>
              <td>
                <i class="material-icons team-list" data-toggle="tooltip" data-placement="top" title="{{ hrProject.Teams }}">person</i>
                {{ hrProject.Teams | slice:0:20 }}
              </td>
              <td class="text-right">
                <div class="progress-container">
                  <span class="progress-badge" *ngIf="!cfgHoursDivided">
                    <i class="material-icons">show_chart</i>
                    {{ hrProject.Hours/8 | number:'1.1-1'  }} J<span *ngIf="hrProject.StatAllocated>0"> / {{ hrProject.StatAllocated/8 | number:'1.1-1'  }} J</span>
                  </span>
                  <span class="progress-badge" *ngIf="cfgHoursDivided">
                    <i class="material-icons">show_chart</i>
                    {{ hrProject.Hours | number:'1.1-1'  }} h<span *ngIf="hrProject.StatAllocated>0"> / {{ hrProject.StatAllocated | number:'1.1-1'  }} h</span>
                  </span>
                  <div class="progress" *ngIf="hrProject.StatAllocated>0">
                    <div class="progress-bar" role="progressbar" [class.progress-bar-success]="hrProject.Hours/hrProject.StatAllocated<0.8" [class.progress-bar-warning]="hrProject.Hours/hrProject.StatAllocated>=0.8 && hrProject.Hours/hrProject.StatAllocated<0.9" [class.progress-bar-danger]="hrProject.Hours/hrProject.StatAllocated>=0.9" style.width="{{ hrProject.Hours *100 / hrProject.StatAllocated | number:'1.0-0' }}%">
                    </div>
                  </div>
                </div>
              </td>
              <td class="td-actions text-right">
                <!--<button type="button" rel="tooltip" class="btn btn-info">
                  <i class="material-icons">person</i>
                </button> -->
                <button type="button"  class="btn btn-warning" routerLink="/projects/edit/{{ hrProject.id }}">
                  <i class="material-icons">edit</i> <!-- data-toggle="tooltip" data-placement="top" title="Editer" -->
                </button>&nbsp;
                <button *ngIf="hrProject.Type=='P'" type="button" class="btn btn-danger" (click)="hrProjectArchiveDel(hrProject.id)">
                  <i class="material-icons">archive</i><!--  data-toggle="tooltip" data-placement="top" title="Archiver" -->
                </button>
                <button *ngIf="hrProject.Type=='A'" type="button" data-toggle="tooltip" data-placement="top" title="Restaurer" class="btn btn-success" (click)="hrProjectUnArchive(hrProject.id)">
                  <i class="material-icons">unarchive</i>
                </button>
              </td>
            </tr>
          </tbody>

希望這些信息對你有所幫助......所以你可以幫助我:)

Answer 1

為此，您可以創建自定義 pipe 如下 Pipe：my-filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myFilter'
})
export class MyFilterPipe implements PipeTransform {

  transform(items: any[], keyword: any, properties: string[]): any[] {
    if (!items) return [];
    if (!keyword) return items;
    return items.filter(item => {
      var itemFound: Boolean;
      for (let i = 0; i < properties.length; i++) {
        if (item[properties[i]].toLowerCase().indexOf(keyword.toLowerCase()) !== -1) {
          itemFound = true;
          break;
        }
      }
      return itemFound;
    });

  }
}

在您要使用此 pipe 的模板內

<input type="search" class="form-control filter-list-input" placeholder="Filter"
                  aria-label="Filter" name="search" [(ngModel)]="searchText" >

    <div *ngFor="let itemof myItems | myFilter:searchText:['firstPropertyName', 'secondPropertyName']; let i = index">...
</div>