Angular 2+：在ngFor循环中绑定输入框与按钮

这个问题我之前也碰到过，本质是Angular在*ngFor循环里处理原始类型和引用类型的绑定逻辑差异导致的，咱们一步步来解决：

错误原因分析 #

你遇到的Cannot assign to a reference or variable!错误，通常是因为你的数组存储的是数字这种原始类型，在*ngFor循环里，let item of yourArray中的item是原数组元素的值副本，不是引用。当你试图通过ngModel或直接赋值修改item时，Angular会阻止这种操作——因为修改副本不会同步到原数组，而且这种赋值操作不符合Angular的绑定规则。

解决方案：改用对象数组存储值 #

把数组里的原始数字改成包含数值属性的对象，这样*ngFor循环里的每个元素都是对象的引用，修改对象的属性会直接同步到原数组，同时避免上述错误。

1. 组件TS代码示例

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

@Component({
  selector: 'app-number-inputs',
  templateUrl: './number-inputs.component.html',
  styleUrls: ['./number-inputs.component.css']
})
export class NumberInputsComponent {
  // 用对象数组替代原始数字数组
  numberItems: { value: number }[] = [
    { value: 0 },
    { value: 0 },
    { value: 0 }
  ];

  // 增加数值方法
  increment(item: { value: number }) {
    item.value++;
  }

  // 减少数值方法（可选：防止数值小于0）
  decrement(item: { value: number }) {
    if (item.value > 0) {
      item.value--;
    }
  }
}

2. 组件HTML模板示例

<div *ngFor="let item of numberItems">
  <button (click)="decrement(item)">-</button>
  <!-- 双向绑定到对象的value属性 -->
  <input type="number" [(ngModel)]="item.value" min="0">
  <button (click)="increment(item)">+</button>
</div>

为什么这样可行？ #

• 对象是引用类型，*ngFor循环里的item指向原数组中对象的内存地址，修改item.value就是直接修改原数组里对象的属性值。
• [(ngModel)]双向绑定可以正常工作，因为绑定的是对象的属性，不是局部变量或引用副本。

如果你坚持用原始数字数组（不推荐） #

如果一定要用原始类型数组，可以通过循环的索引来修改原数组元素，模板代码如下：

<div *ngFor="let num of numbers; let i = index">
  <button (click)="numbers[i]--">-</button>
  <input type="number" [value]="numbers[i]" (input)="numbers[i] = $event.target.valueAsNumber">
  <button (click)="numbers[i]++">+</button>
</div>

这种方式虽然能工作，但不如对象数组直观，而且处理输入事件时需要手动转换数值类型，容易出问题，所以更推荐用对象数组的方案。

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