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

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>

我必须做的事情：

过滤在搜索输入中写入值的项目。过滤器必须能够按 ID （fanmission.index）进行过滤：数字，名称 （fanmission.name）：string ，作者 （fanmission.details.author）：string [] ， Game abbr （fanmission.details.game .short）：字符串，游戏全名 （fanmission.details.game.name）：字符串，版本 （ fanmission.details.version）：字符串，首次发布日期 （fanmission.details.firstreleasedate）：日期和上次发布日期 （fanmission.details.lastupdatedate）：日期
点击三个过滤器选项之一过滤项目。 小偷：黑暗计划 （＆＃34; fanmission.details.game.short＆＃34;：＆＃34; tdp＆＃34;）; 小偷黄金 （＆＃34; fanmission.details.game.short＆＃34;：＆＃34; tg＆＃34;）和小偷II：金属年龄 （＆＃34; fanmission.details.game.short＆＃34;：＆＃34; tma＆＃34;）。当我点击小偷：金属时代时，只有在游戏列中有TDP的项目才能显示。 一次只能激活一个选项。当我单击一个活动选项时，它必须处于非活动状态并停止过滤数据表。
当三个过滤器选项（按钮）中的一个处于活动状态时，顶部的大标题必须更改并获取游戏的全名。当我点击其中一个按钮（例如 Thief：The Dark Project ）时，项目按游戏全名过滤，大标题显示游戏全名（ Thief：The Dark Project） ）。
使用过滤器选项时，必须更新大标题（游戏/过滤器标题）下方的段落。当我不使用任何过滤器时，段落必须返回总金额我的数据库中的项目，最后发布的项目（这个项目具有最近的日期）和最后更新的项目（这个项目具有最后一次更新日期）。当我搜索项目（搜索输入）时，此段落中必须包含可用主题的数量。最新更新和可见的第一个项目也必须在段落中以相应的名称表示。
每个表头都对数据表内容ASC / DESC 进行排序。当我点击其中一个head列时，这个列必须订购数据库ASC / DESC中的项目。
如果没有按特定字词（搜索输入）搜索结果，则表格必须表明：未找到结果。

我需要创建自定义管道并将其应用于我的 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。＆＃34;列名，即name / id＆＃34; .search（新的RegExp（arg，＆＃34; i＆＃34;））＆gt; = 0）

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

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

1 个答案: