搜索栏的角度问题

Question

你好，我希望你很好，我有一个允许用户通过标签搜索文件的组件，并且我使用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

Answer 1

docs状态存在一个称为pageBoundsCorrection的事件：

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

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

一些其他建议：

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

DEMO：https://stackblitz.com/edit/angular-hv5u5h