0

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

正如你在第一页看到的这个标签

在第二页中，他向我展示了包含此文件的页面，但他没有展示它自己的文件

4

1 回答 1

0

文档指出有一个事件称为pageBoundsCorrection：

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

因此，您应该以与处理(pageChange).

其他一些建议：

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

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

于 2020-04-04T07:26:02.380 回答