Angular 搜索栏问题

Question

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

但我希望他出示包含该文件的卡片。 下面两张图片让事情更清楚

my component.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();
    }
  }
}

my component.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

Answer 1

docs 声明有一个名为 pageBoundsCorrection 的事件：

pageBoundsCorrection [event handler] The expression specified will be invoked when the currentPage value is found to be out-of-bounds (e.g. the collection size was reduced). The $event argument will be the number of the closest valid page.

因此您应该像处理 (pageChange).

一样处理该事件

其他一些建议：

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

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

Angular 搜索栏问题

Angular issue with Search Bar

search

angular

ngx-pagination