在 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>