面试题：Angular中ngFor指令如何实现列表项的唯一标识

Question

在Angular应用里，使用ngFor指令遍历数组展示列表。假设数组元素是普通对象，每个对象有'id'属性。请阐述如何利用ngFor的trackBy函数为每个列表项设置唯一标识，以优化性能，并给出具体代码示例。

Answer 1

1. 原理阐述：
   • 在Angular中，当使用ngFor指令遍历数组展示列表时，如果数组发生变化（如添加、删除、重新排序等），Angular默认会重新渲染整个列表。而trackBy函数可以给每个列表项设置一个唯一标识，这样Angular就能通过对比这个唯一标识来判断哪些列表项真正发生了变化，只重新渲染变化的部分，从而优化性能。
   • 当使用trackBy函数时，Angular会在每次渲染列表时调用该函数，传入当前索引和当前项，函数返回一个唯一标识供Angular追踪。
2. 代码示例：
   • 假设我们有一个组件，组件类中定义了一个数组和trackBy函数：

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

@Component({
  selector: 'app - my - list',
  templateUrl: './my - list.component.html',
  styleUrls: ['./my - list.component.css']
})
export class MyListComponent {
  items = [
    { id: 1, name: 'item1' },
    { id: 2, name: 'item2' },
    { id: 3, name: 'item3' }
  ];

  trackById(index: number, item: any) {
    return item.id;
  }
}

• 在模板文件（my - list.component.html）中使用ngFor和trackBy：

<ul>
  <li *ngFor="let item of items; trackBy: trackById">{{item.name}}</li>
</ul>

在上述代码中，trackById函数返回每个对象的id属性作为唯一标识。这样在数组发生变化时，Angular能通过id准确判断哪些列表项需要更新，提高渲染效率。