Angular：使用搜索输入和特定过滤器选项过滤表的内容

Question

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

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>

我必须做的：

1. 过滤在搜索输入中写入值的项目。过滤器必须能够按 ID (fanmission.index):number, Name (fanmission.name):string 过滤, 作者 (fanmission.details.author):string[], 游戏缩写 (fanmission.details.game .short):string, 游戏全名 (fanmission.details.game.name):string, 版本 ( fanmission.details.version):string、首次发布日期 (fanmission.details.firstreleasedate):Date和最后发布日期 (fanmission.details.lastupdatedate):日期.
2. 点击三个过滤器选项之一过滤项目。 盗贼：黑暗计划 ("fanmission.details.game.short": "tdp"); 盗贼金币 ("fanmission.details.game.short": "tg") 和盗贼II：金属时代 (" fanmission.details.game.short": "tma")。当我点击 Thief: The Metal Age 时，只有在 Game 列中具有 TDP 的项目应该可见。 一次只能激活一个选项。当我点击一个活动选项时，它必须处于非活动状态并停止过滤数据表。
3. 当三个过滤器选项（按钮）之一处于活动状态时，顶部的大标题必须更改并取游戏的全名。当我点击其中一个按钮（例如小偷：黑暗计划）时，项目会按游戏全名过滤，大标题显示游戏全名（小偷：黑暗计划）。
4. 使用过滤器选项时必须更新大标题（游戏/过滤器标题）下方的段落。当我不使用任何过滤器时，该段落必须返回我的数据库中的项目总数，最后一次发布（这个有最近的日期）和最后一次更新（这个有最近的更新日期）。当我搜索一个项目（搜索输入）时，可用项目的数量必须出现在本段中。最新更新和第一个可见的项目也必须在段落中标明其各自的名称。
5. 每个表头对数据表内容排序为 ASC/DESC。当我单击其中一个标题列时，此列必须对数据库 ASC/DESC 中存在的项目进行排序。
6. 当没有按特定词搜索的结果（搜索输入）时，表格必须显示：未找到结果。

我需要创建自定义管道并将它们应用到我的 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，方法是应用我帖子顶部列出的内容。我怎样才能做到这一点？我需要使用循环吗？

Answer 1

我在开发我的一个应用程序时遇到了同样的情况，我不喜欢使用过滤器作为管道。相反，您可以将其用作服务并将列名和输入文本作为变量传递给函数。然后你可以返回 fanmission."column name i.e name/id".search(new RegExp(arg, "i")) >= 0)