这就是我现在正在做的事情 . 我有一个数据表，有一些选项来过滤他的内容：

HTML组件：

<div class="row topbuffer-20">
  <div class="col">
    <h3>Thief: The Dark Project</h3>
    <p>There are <span *ngIf="fanmissions"><strong>{{fanmissions.length}}</strong></span> available Fan Missions. The last released is <strong>Veniam in Sunt Pariatur</strong> and the last updated is <strong>Ullamco Ad in Elit</strong>.</p>
  </div>
</div>
<div class="row">
  <div class="col">
    <form>
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-search fa-fw"></i></span>
        <input class="form-control" [(ngModel)]="searchinput" name="searchinput" placeholder="Search a Fan Mission..." type="text">
      </div>
    </form>
  </div>
  <div class="col">
    <div class="btn-group">
      <span class="btn-group-addon"><i class="fa fa-filter fa-fw"></i></span>
      <button type="button" class="btn btn-secondary" data-game-short="tdp">Thief: The Dark Project</button>
      <button type="button" class="btn btn-secondary" data-game-short="tg">Thief Gold</button>
      <button type="button" class="btn btn-secondary" data-game-short="tma">Thief II: The Metal Age</button>
    </div>
  </div>
</div>
<div class="row topbuffer-20">
  <div class="col">
    <table class="table table-hover table-bordered table-sm">
      <thead class="thead-default">
        <tr>
          <th class="align-middle text-center">#</th>
          <th class="align-middle">Fan Mission</th>
          <th class="align-middle text-center">Game</th>
          <th class="align-middle text-center">Version</th>
          <th class="align-middle text-center">NewDark</th>
          <th class="align-middle text-center">First release</th>
          <th class="align-middle text-center">Last update</th>
        </tr>
      </thead>
      <tbody>
        <tr class="ectm-listedfanmission" *ngFor="let fanmission of fanmissions | EctmOrderFMsBy: 'name' | EctmFilterFMsBySearch: searchinput; let i = index">
          <td class="align-middle text-center" scope="row">{{fanmission.index}}</td>
          <th class="align-middle text-capitalize">
            <small>{{fanmission.details.author.join(', ')}}</small><br>
            {{fanmission.name}}
          </th>
          <td class="align-middle text-center" title="{{fanmission.details.game.name}}"><small>{{fanmission.details.game.short}}</small></td>
          <td class="align-middle text-center"><small>{{fanmission.details.version}}</small></td>
          <td class="align-middle text-center" *ngIf="fanmission.details.isNewdark; else newdarknotrequired"><i class="fa fa-check text-success"></i></td>
          <ng-template #newdarknotrequired><td class="align-middle text-center"><i class="fa fa-times text-danger"></i></td></ng-template>
          <td class="align-middle text-center"><small>{{fanmission.details.firstreleasedate | date:'yyyy/MM/dd'}}</small></td>
          <td class="align-middle text-center"><small>{{fanmission.details.lastupdatedate | date:'yyyy/MM/dd'}}</small></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

我该怎么做：

• Filter items writing a value in the search input . 过滤器必须能够通过 ID （fanmission.index）进行过滤：number， Name （fanmission.name）：string， Author （fanmission.details.author）：string []，01025052（fanmission.details.game.short） ：string， Game fullname （fanmission.details.game.name）：string， Version （fanmission.details.version）：string， First release date （fanmission.details.firstreleasedate）：Date和 Last release date （fanmission.details.lastupdatedate）：Date .

• Filter items clicking on one of the three filter options . Thief: The Dark Project （"fanmission.details.game.short"："tdp"）; Thief Gold （"fanmission.details.game.short"："tg"）和 Thief II: The Metal Age （"fanmission.details.game.short"："tma"） . 当我单击 Thief: The Metal Age 时，只有在游戏列中具有TDP的项目才可见 . Only ONE 选项可以立即激活 . 当我单击活动选项时，它必须处于非活动状态并停止过滤数据表 .

• Big heading at the top have to change and take the fullname of the game when one of the three filter options (buttons) is active . 当我点击其中一个按钮（例如Thief：The Dark Project）时，项目按游戏全名过滤，大 Headers 显示游戏全名（Thief：The Dark Project） .

• The paragraph below the big heading (game/filter title) have to be updated when using filter options. 当我不使用任何过滤器时，段落必须返回我的数据库中的项目总数，最后发布的项目（这个项目具有最近的日期）和最后更新的项目（这个项目最后一次更新）更新日期） . 当我搜索项目（搜索输入）时，此段落中必须包含可用主题的数量 . 最新更新和可见的第一项也必须在段落中以其各自的名称表示 .

• Each table head order the datatable content ASC/DESC . 当我点击其中一个head列时，这个列必须订购数据库ASC / DESC中的项目 .

• When there is no result searching by specific word (search input) the table has to indicate : No result found .

我需要创建自定义管道并将它们应用到我的 ectm-list.component .

请考虑在GitHub上查看我的项目，以便了解它的结构：http://www.github.com/jonathanlinat/enhanced-cheapthiefmissions/

有人能帮助我完成这项重大任务吗？

1.过滤在搜索输入中写入值的项目

此时，我只能通过 NAME 过滤 . 这是我的管道：

@Pipe({
  name: 'EctmFilterFMsBySearch'
})
export class EctmFilterFMsBySearchPipe implements PipeTransform {

  transform(value: any, arg: any): any {
    if (value != null && arg != null) {
      var filteredfanmissions = value.filter((fanmission) => fanmission.name.search(new RegExp(arg, "i")) >= 0);
      if (filteredfanmissions != 0) {
        return filteredfanmissions;
      }
    } else {
      return value;
    }
  }

}

正如你在这里看到的......

value.filter((fanmission) => fanmission.name.search(new RegExp(arg, "i")) >= 0);

...我需要通过在我的帖子顶部应用列出的那些来更改fanmission.name . 我怎样才能做到这一点？我需要使用循环吗？