Angular 5 ngFor内嵌ngIf，如何显示过滤后项的真实索引

这个问题很常见——你现在的写法是在*ngFor内部用*ngIf隐藏不符合条件的项，但ngFor其实还是在遍历整个原数组，所以拿到的index自然是原数组的位置，不是过滤后的真实序号。咱们换个思路就能解决：

核心思路 #

不要在模板里用*ngIf过滤，而是先在组件中生成过滤后的数组，然后直接遍历这个过滤后的数组，此时*ngFor的index就是过滤后的真实序号了。

修改后的完整代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input type="search" [(ngModel)]="search" />
    <div *ngFor="let item of filteredArray; let i = index">
      {{i}} = {{item}}
    </div>
  `
})
export class AppComponent {
  myArray = ["ronald","ron","dana","bobby","bob","bob the builder","ronald"];
  search: string;

  // 用getter自动计算过滤后的数组
  get filteredArray() {
    if (!this.search) {
      return this.myArray;
    }
    // 过滤出包含搜索关键词的项，需要忽略大小写的话可以添加toLowerCase()处理
    return this.myArray.filter(item => item.includes(this.search));
  }
}

关键改动说明 #

1. 简化双向绑定：把原来分开的[ngModel]="search"和(ngModelChange)="search = $event"改成[(ngModel)]="search"，这是Angular双向绑定的语法糖，写法更简洁。
2. 添加过滤数组的getter：filteredArray会在search值变化时自动重新计算，返回符合搜索条件的项组成的新数组。
3. 遍历过滤后的数组：*ngFor直接遍历filteredArray，此时let i = index拿到的就是过滤后数组的索引，也就是你想要的真实序号。
4. 移除模板里的*ngIf：因为已经在组件层完成了过滤逻辑，模板里不需要再做条件判断，直接渲染即可。

这样当你输入"bob"时，就会显示：

• 0 = bobby
• 1 = bob
• 2 = bob the builder

完全符合你的需求~

内容的提问来源于stack exchange，提问作者SexyMF