时间戳

首页 > 解决方案 > 如何在不丢失索引的情况下过滤数组？

javascript - 如何在不丢失索引的情况下过滤数组？

问题描述

app.component.html

<div class="input-group">
<input type="text" #searchBox class="form-control chapter-filter" placeholder="Search chapter..." name="chapter" [(ngModel)]="searchText" />

** 在searchText的基础上，我正在过滤章节**

搜索-filter.pipe.ts

transform(items, searchText, searchField: string) {
let filteredList = [];
if (searchText) {
    return items.filter(item => {
        searchText = searchText.trim().toLowerCase();
        let itemName = item[searchField].trim().toLowerCase();

        if (itemName.indexOf(searchText) > -1) {
            filteredList.push(item);
            return filteredList;
        }
    })
} else {
    return items;
}

}

问题是当我过滤任何章节时它工作正常，但是章节的索引是根据过滤的章节设置的。
--> 假设我有 3 章

  1. 一（索引 - 0）
  2. 二（索引 - 1）
  3. 三（索引 - 2）

当我输入三个时，它只显示三个。没错，但它的索引现在是 0。 我怎样才能让它保持索引 2。我的意思是它应该过滤但不应该改变索引。

标签： javascriptangulartypescript

解决方案

这里有几个选项。

  1. 将章节传递给点击处理程序
<li (click)="changeChapter(chapter)" *ngFor="let chapter of chapters | searchFilter">

并在原始数组中查找索引

changeChapter(chapter) { 
   this.chapterIndex = this.chapters.indexOf(chapter);
  // and whatever ...
}
  1. 使 chapterIndex 的一个属性Chapter
<li (click)="changeChapter(chapter)" *ngFor="let chapter of chapters | searchFilter">
   {{ chapter.chapterIndex }} - {{ chapter.name }}
</li>
  1. 在组件内部执行过滤器逻辑
<li (click)="changeChapter(chapter)" *ngFor="let chapter of displayedChapters">
</li>

displayedChapters: Chapter[];
private allChapters: Chapter[];

changeChapter() {
   // whatever happens here...
}

推荐阅读