在 Angular 中，*ngFor 是一个结构型指令，用于在模板中循环渲染一组数据。

先创建一个test组件【ng g c pages/test】

test.component.ts组件内容如下：

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

interface PeopleInterface {
    id: number;
    name: string;
    age: number;
}

@Component({
    selector: 'app-test',
    imports: [
        NgForOf
    ],
    templateUrl: './test.component.html',
    styleUrl: './test.component.scss'
})
export class TestComponent {

    public people: PeopleInterface[] = [
        {id: 1, name: 'Alice', age: 22},
        {id: 2, name: 'Bob', age: 25},
        {id: 3, name: 'Charlie', age: 28},
        {id: 4, name: 'David', age: 30},
        {id: 5, name: 'Eve', age: 21},
        {id: 6, name: 'Frank', age: 35},
        {id: 7, name: 'Grace', age: 26},
        {id: 8, name: 'Heidi', age: 24},
        {id: 9, name: 'Ivan', age: 29},
        {id: 10, name: 'Judy', age: 27}
    ];

    // 定义 trackBy 函数
    trackByPersonId(index: number, item: PeopleInterface): number {
        return item.id;
    }
}

test.component.html内容如下：

<ul>
    <li *ngFor="let item of people; trackBy: trackByPersonId">
        ID: {{ item.id }}, Name: {{ item.name }}, Age: {{ item.age }}
    </li>
</ul>

这里，items 是一个数组或可迭代对象，item 是在每次迭代中表示当前元素的局部变量。在每次循环中，Angular 会将 item 的值替换为 items 数组中的当前元素，并渲染相应的 HTML 内容。

• trackByPersonId 函数：这是一个自定义的 trackBy 函数，它接收两个参数：index 表示当前元素的索引，items 表示当前元素对象。函数返回 items.id，即每个对象的唯一标识。
• trackBy 指令：在 *ngFor 指令中使用 trackBy 绑定到 trackByPersonId 函数，这样 Angular 就会根据 id 来跟踪每个元素，提高性能。

通过这种方式，当 items 数组发生变化时，Angular 会根据 id 来判断哪些元素需要更新，而不是重新渲染整个列表。

页面刷新你就会得到一个列表了。

关于trackBy是否要使用：

trackBy 不是必须使用的，数据量较小且不常变化，简单场景下的快速开发不用使用。

但是在数据量较大和数据频繁更新的场景下建议使用。

ngFor的其他属性：

index:

<ul>
    <li *ngFor="let item of people; trackBy: trackByPersonId;let i = index">
        INDEX: {{ i }},ID: {{ item.id }}, Name: {{ item.name }}, Age: {{ item.age }}
    </li>
</ul>

first,Last,Even,Odd

<ul>
    <li *ngFor="let item of people;  let first = first; let last = last; let even = even; let odd = odd">
        First: {{ first }}, Last: {{ last }}, Even: {{ even }}, Odd: {{ odd }}
    </li>
</ul>

完美。