Angular应用中数字数组的双向绑定问题求助

我碰到过不少开发者遇到这个坑，核心原因大多是对Angular中基本类型的绑定逻辑和ngFor遍历的机制理解不到位。咱们一步步来排查和解决：

最常见的错误：绑定遍历的副本而非原数组元素 #

如果你的模板是这么写的，那肯定会出问题：

<!-- ❌ 错误写法：绑定的是遍历出来的基本类型副本，修改不会同步到原数组 -->
<div *ngFor="let num of numbers">
  <input type="number" [(ngModel)]="num">
</div>

因为数字是基本类型，ngFor遍历出来的num是原数组元素的拷贝，修改这个副本不会影响原数组中的值，所以模板始终显示初始的0。

正确的实现方式 #

1. Ligne.Component.ts 正确初始化数组 #

确保数组在组件中正确定义并初始化：

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

@Component({
  selector: 'app-ligne',
  templateUrl: './ligne.component.html'
})
export class LigneComponent {
  // 初始化一个长度为5、默认值为0的数字数组
  numbers: number[] = Array(5).fill(0);

  // 可选：添加调试方法，查看数组实时变化
  debugArray() {
    console.log('当前数组值:', this.numbers);
  }
}

2. Ligne.Component.html 使用索引绑定原数组元素 #

通过ngFor的index变量，直接绑定数组的对应索引元素，这样修改输入框的值会直接同步到原数组：

<!-- ✅ 正确写法：绑定数组的索引元素，直接修改原数组 -->
<div *ngFor="let _ of numbers; let i = index">
  <input 
    type="number" 
    [(ngModel)]="numbers[i]" 
    placeholder="输入数字"
    (blur)="debugArray()" <!-- 可选：失去焦点时打印数组，验证变化 -->
  >
</div>

<!-- 实时显示数组状态，方便验证 -->
<p>当前数组值：{{ numbers }}</p>

其他可能的排查点 #

• 确认FormsModule已导入：双向绑定[(ngModel)]依赖FormsModule，需要在你的模块（比如AppModule）中导入：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [FormsModule],
    // ...其他配置
  })
  export class AppModule { }
  

• 如果是@Input传入的数组：如果数组是从父组件传递过来的，确保父组件的数组是可变的，且当数组变化时子组件能检测到。如果使用了OnPush变更检测策略，需要手动触发变更检测，或者通过修改数组引用（比如用扩展运算符this.numbers = [...this.numbers]）来触发变更。

内容的提问来源于stack exchange，提问作者Lamloumi Afif