我将使用此语法将索引值设置为HTML元素的属性：

角度>=2

您必须使用let来声明值，而不是#。

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

角度=1

<ul>
    <li *ngFor="#item of items; #i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

以下是更新的plunker：http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview.

只是对此的更新，Thierry的回答仍然正确，但Angular2在以下方面进行了更新：

<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
  <li>{{item}}</li>
</ul>

#i=索引现在应该让i=索引

编辑/更新：

*ngFor应该位于要foreach的元素上，因此在本例中应该是：

<ul>
  <li *ngFor="let item of items; let i = index" [attr.data-index]="i">{{item}}</li>
</ul>

编辑/更新

角度5

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

edit/更新

角度7/8

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

我认为它之前已经得到了回答，但如果您正在填充无序列表，那么*ngFor将出现在您想要重复的元素中。所以它应该是insdide＜li＞。此外，Angular2现在使用let来声明变量。

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">     
               {{item}}
    </li>
</ul>

其他答案是正确的，但您可以完全省略[attr.data索引]，只使用

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

在角度5/6/7/8中：

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

在旧版本中

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

角度.io▸ 美国石油学会▸ NgForOf公司

描述局部变量

单元测试示例

ng_for_spec.ts格式

另一个有趣的例子

分组

试试这个

<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>

您可以直接使用[attr.dataindex]将索引保存到Angular版本2和更高版本中提供的数据索引属性。

    <ul*ngFor="let item of items; let i = index" [attr.data-index]="i">
         <li>{{item}}</li>
    </ul>

带laravel分页

file.component.ts file

    datasource: any = {
        data: []
    }

    loadData() {
        this.service.find(this.params).subscribe((res: any) => {
            this.datasource = res;
        });
    }

html file

   <tr *ngFor="let item of datasource.data; let i = index">
       <th>{{ datasource.from + i }}</th>
   </tr>

添加这个迟到的答案，以显示大多数人会遇到的情况。如果您只需要查看列表中的最后一项，请使用最后一个关键字：

<div *ngFor="let item of devcaseFeedback.reviewItems; let last = last">
  <divider *ngIf="!last"></divider>
</div>

这将为除最后一项之外的每个项添加分隔符组件。

由于下面的注释，我将添加可以别名为本地变量的ngFor导出值的其余部分（如文档中所示）：

$implict:T：可迭代的（ngForOf）。ngForOf:NgIterable：可迭代表达式的值。当表达式比属性访问更复杂时，例如当使用异步管道（userStreams|async）时，这很有用。index:number：可迭代项中当前项的索引。count：number：可迭代的长度。first：boolean：当项是可迭代项中的第一个项时为True。last：boolean：当项是可迭代项中的最后一项时为True。even：boolean：当项在可迭代项中具有偶数索引时为True。odd:boolean：当项在可迭代项中具有奇数索引时为True。

获取API调用

    @Injectable({
      providedIn: 'root',
    })
    export class ApiService {

      private readonly postsSubject = new BehaviorSubject<any>(null);
      readonly postsResult$ = this.postsSubject.asObservable();

      get postsResult(): any {
        return this.postsSubject.getValue();
      }
      set postsResult(posts: any) {
        this.postsSubject.next(gifRes);
      }
    
      constructor(private http: HttpClient) {}
        getSearchResult(): Observable<any> {
            this.postsResult = this.http.get<any>('https://jsonplaceholder.typicode.com/posts');
          }
}

用于获取postResult的索引

<div *ngFor="let post of apiService.postsResult$ | async; let i = index">
{{i}} - {{post.title}}
<div>