搜索栏的角度问题答案

【问题标题】：Angular issue with Search Bar搜索栏的角度问题
【发布时间】：2020-07-16 05:09:29
【问题描述】：

你好，希望你一切安好，我有一个组件允许用户按标签搜索文件，我使用 ngx-pagination 进行分页。当我在第一页时，我可以搜索所有文件，但是当我移动到其他页面时，搜索总是不计算上一页，只有搜索方法适用于下一页。但他给我的页码包含这个标签。

但我希望他出示包含文件的卡片。 以下 2 张照片让事情更清楚

我的组件.TS：

export class AfficherComponent implements OnInit {
  SearchTag: String;
  files = [];
  constructor(private uploadService: UploadFileService) {}
  ngOnInit() {
    this.reloadData();
  }
  reloadData() {
    this.uploadService.getFilesList().subscribe((data) => {
      this.files = data;
    });
  }

  Search() {
    if (this.SearchTag != "") {
      this.files = this.files.filter((res) => {
        return res.tag
          .toLocaleLowerCase()
          .match(this.SearchTag.toLocaleLowerCase());
      });
    } else if (this.SearchTag === "") {
      this.ngOnInit();
    }
  }
}

我的组件.HTML

<div id="pricing-table" class="clear" data-aos="fade-right">
  <div class="sel">
    <div class="row">
      <div class="col" style="left: -160px;">
        <input
          type="text"
          placeholder="Search..."
          [(ngModel)]="SearchTag"
          (input)="Search()"
          style="margin: 20px;"
        />
        <div id="toggle" style="left: 450px;"></div>
      </div>
    </div>
  </div>

  <div
    class="plan"
    *ngFor="let file of files | paginate: { itemsPerPage: 3, currentPage: p }"
  >
    <h3></h3>
    <button class="btn" style="background-color: #09c0a3;">Ouvrir</button>
    <ul>
      <li><b>Name: </b> {{ file.nom }}</li>
      <li><b>Type: </b> {{ file.type }}</li>
      <li><b>Departement: </b>{{ file.departement }}</li>
      <li><b>Tag: </b>{{ file.tag }}</li>
    </ul>
  </div>
  <pagination-controls
    (pageChange)="p = $event"
    style="float: right;"
  ></pagination-controls>
</div>

as you see this tag in the first first page

in the second page ,he shows me the page which contains this file but he doesn't show the file it self

【问题讨论】：

标签： angular search ngx-pagination

【解决方案1】：

docs 表示有一个名为pageBoundsCorrection 的事件：

pageBoundsCorrection [event handler] 当发现currentPage 值越界（例如，集合大小减小）时，将调用指定的表达式。 $event 参数将是最近的有效页面的编号。

因此，您应该以与处理 (pageChange) 相同的方式处理该事件。

其他一些建议：

使用单独的数组进行过滤。当搜索文本为空时，您当前正在重新加载状态。这做的工作比必要的要多
在您的组件上声明p 属性以明确HTML 正在使用它
使用处理函数处理事件，而不是在 HTML 中添加逻辑
在您的过滤器中使用includes 而不是match（除非您要处理正则表达式搜索）

演示：https://stackblitz.com/edit/angular-hv5u5h

【讨论】：