如何获取 ngFor 的索引 - TypeScript

在 Angular 中，我们可以使用 ngFor 指令来循环遍历数组或对象并渲染模板。有时我们需要获取当前循环遍历的索引值，本文将介绍如何在 TypeScript 中获取 ngFor 的索引。

解决方案

在使用 ngFor 循环遍历时，可以使用 index 变量来获取当前循环遍历的索引值。例如：

<ul>
  <li *ngFor="let item of items; index as i">{{ i }} - {{ item }}</li>
</ul>

在上述代码中，我们使用 index as i 语法来将当前循环遍历的索引值赋值到变量 i 上，并在模板中使用 i 显示当前索引。

如果您在 TypeScript 中需要访问当前循环遍历的索引值，则可以使用 @ViewChild 装饰器和 ngFor 指令中的 TemplateRef 类。例如：

<ul>
  <li #itemTemplate *ngFor="let item of items; index as i">{{ i }} - {{ item }}</li>
</ul>

在上述代码中，我们定义了一个名为 itemTemplate 的本地变量，并将其应用到 ngFor 指令的模板中。在 TypeScript 中，我们可以使用 @ViewChild 装饰器来获取模板的引用。例如：

import { Component, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  @ViewChild('itemTemplate', { read: TemplateRef }) itemTemplate: TemplateRef<any>;

  items: string[] = ['Item 1', 'Item 2', 'Item 3'];
  
  constructor(private viewContainerRef: ViewContainerRef) {}

  ngAfterViewInit() {
    const viewRef = this.viewContainerRef.createEmbeddedView(this.itemTemplate);
    viewRef.detectChanges();

    viewRef.rootNodes.forEach((node, index) => {
      console.log(`Index of node ${index}: ${node.getAttribute('ng-reflect-ng-for-of-index')}`);
    });
  }
}

在上述代码中，我们通过 @ViewChild 装饰器获取了名为 itemTemplate 的模板引用，并在 ngAfterViewInit 生命周期钩子中使用 ViewContainerRef.createEmbeddedView() 方法生成视图。我们通过调用 viewRef.rootNodes.forEach() 方法来遍历生成的 DOM 节点，以获取节点的 ng-reflect-ng-for-of-index 属性值，即为我们要访问的索引值。

总结

获取 ngFor 的索引值本质上是通过在 ngFor 模板中使用 index 变量实现的。要在 TypeScript 中获取索引，我们可以使用 @ViewChild 装饰器和 TemplateRef 类来获取模板的引用，并遍历生成的 DOM 节点以获取索引值。