Angular NgFor迭代数组中的x个对象

基础概念

NgFor 是 Angular 框架中的一个指令，用于迭代数组中的元素并在模板中生成相应的 DOM 元素。它通常与 *ngFor 结构型指令一起使用，以便在组件类中定义的数组上进行迭代。

类型

NgFor 主要有两种类型：

简单迭代：直接迭代数组中的元素。
带索引的迭代：可以获取当前元素的索引。

应用场景

列表渲染：如商品列表、用户列表等。
表格数据展示：在表格中展示多行数据。
动态表单生成：根据数组中的对象动态生成表单控件。

示例代码

假设我们有一个包含多个对象的数组，每个对象代表一个用户，如下所示：

// user.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
  ];
}

在模板中使用 *ngFor 进行迭代：

<!-- user.component.html -->
<ul>
  <li *ngFor="let user of users">
    {{ user.name }} - {{ user.age }}
  </li>
</ul>

如果需要带索引的迭代，可以这样做：

<ul>
  <li *ngFor="let user of users; let i = index">
    {{ i + 1 }}. {{ user.name }} - {{ user.age }}
  </li>
</ul>

可能遇到的问题及解决方法

问题1：数组更新但视图未刷新

原因：可能是由于数组引用没有改变，Angular 的变更检测机制未能检测到变化。

解决方法：

使用不可变数据操作库（如 immer）来更新数组。
手动触发变更检测，例如使用 ChangeDetectorRef。

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

constructor(private cdr: ChangeDetectorRef) {}

updateUsers() {
  this.users = [...this.users, { id: 4, name: 'David', age: 40 }];
  this.cdr.detectChanges();
}