如何过滤数组而不丢失索引？

Question

app.component.html

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

{{chapter?.name}}'

** 基于searchText 我正在过滤章节**

search-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。我的意思是它应该过滤但不应该改变索引。

Answer 1

这里有几个选项。

1. 将章节传递给点击处理程序

<li (click)="changeChapter(chapter)" *ngFor="let chapter of chapters | searchFilter">

并在原始数组中查找索引

changeChapter(chapter) { 
   this.chapterIndex = this.chapters.indexOf(chapter);
  // and whatever ...
}

2. 使 ChapterIndex 成为 Chapter 的属性

<li (click)="changeChapter(chapter)" *ngFor="let chapter of chapters | searchFilter">
   {{ chapter.chapterIndex }} - {{ chapter.name }}
</li>

3. 在组件内部执行过滤器逻辑

<li (click)="changeChapter(chapter)" *ngFor="let chapter of displayedChapters">
</li>

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

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