在 angular 中使用分页搜索过滤器

Question

Html 组件

<input type="text" class="form-control" placeholder="Search" (change)="searchText($event)"/>

<li *ngFor="let list of this.lists | paginate: { itemsPerPage: count, currentPage: p,totalItems:4 } index as i"><a href="javascript:void(0)"> # {{ i+count * (p - 1) + 1 }} List </a></li>

.ts 文件

  searchText(text_string:any)
   {
    this.lists  = this.lists.filter(item => item.id === text_string.target.value);
   }

我只想显示 id 与此 id 匹配的那些项目{{ i+count * (p - 1) + 1 }}

在现有分页中实现搜索的任何解决方案

Answer 1

首先，您需要两个变量：“listFiltered”和“list”，否则您将失去“this.list”（如果您更改搜索，您将过滤过滤后的列表），所以

searchText(text_string:any)
{
    if (!text_string)
       this.listFiltered=this.lists
    else
       this.listsFiltered  = this.lists.filter(
                item => item.id === text_string.target.value);
}

要分页，通常有两个变量：pageIndex（从 0 到...）和 pageSize（元素数）。 所以你可以使用切片 pipe

<li *ngFor="let list of listsFiltered |
                   slice:pageIndex*pageSize:(pageIndex+1)*pageSize">
...
</li>