在 ngFor 中獲取當前索引

當我們將資料儲存在陣列（員工列表）中時，我們可以使用 *ngFor 函式將此資料轉換為網頁上的表格格式。

當我們在 *ngFor 中進行索引時，它可以幫助我們對陣列中的專案列表進行編號，從而更容易跟蹤列表中的專案，尤其是在處理大量列出的專案時。

例如，我們正在處理一個課程列表，因此在 app.component.ts 中，我們將在一個陣列中建立該列表並將其命名為 courses。

我們應該注意我們給陣列的名稱，因為我們將使用 *ngFor 來獲取索引，使用 i-variable。

在 app.component.ts 中，我們將輸入以下內容：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  courses = [
    { id:1, name:'course1' },
    { id:2, name:'course2' },
    { id:3, name:'course3' }
  ];
}

當你檢視陣列時，你會看到它被命名為 courses，正如我們最初解釋的那樣。

接下來是進入 app.component.html 以傳入 *ngFor 函式，該函式將負責讓陣列被索引。

在這裡，我們將傳遞一些指令：

<ul>
  <li *ngFor="let course of courses; index as i">
      {{ i }} - {{ course.name }}
  </li>
</ul>

輸出示例連結