Angular 2中ngFor生成的输入框如何实现独立值绑定？

嘿，我来帮你搞定这个问题！你遇到的核心问题是所有输入框都绑定到了同一个ngModel变量，所以才会出现改一个全同步的情况。咱们换个思路，用数组存储每行的独立数据，配合*ngFor渲染，就能完美解决啦，具体步骤如下：

1. 在组件类里定义存储每行数据的数组 #

首先在你的组件.ts文件里，初始化一个数组来保存每行的name和data，初始可以加一行空数据让页面加载就有输入框：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 存储每行的独立数据，格式和你要的最终JSON一致
  rowData: Array<{name: string, data: string}> = [{name: '', data: ''}];

  // 新增行的方法
  addRow() {
    this.rowData.push({name: '', data: ''});
  }

  // 获取所有有效数据的方法
  collectAllData() {
    // 可选：过滤掉空行（如果不需要可以直接用this.rowData）
    const validRows = this.rowData.filter(row => row.name.trim() || row.data.trim());
    // 这里就是你要的JSON格式数组啦，可以打印或者传给后端
    console.log(JSON.stringify(validRows));
    // 如果需要推入另一个数组，就用：
    // this.targetArray = [...this.targetArray, ...validRows];
  }

  // 可选：删除指定行的方法
  deleteRow(index: number) {
    this.rowData.splice(index, 1);
  }
}

2. 在模板里用*ngFor渲染动态输入框 #

然后在你的组件.html文件里，用*ngFor循环rowData数组，每个循环项绑定对应的name和data属性：

<!-- 动态生成的输入行 -->
<div *ngFor="let row of rowData; let i = index" style="margin: 10px 0;">
  <input 
    type="text" 
    [(ngModel)]="row.name" 
    placeholder="请输入name"
    style="margin-right: 10px;"
  >
  <input 
    type="text" 
    [(ngModel)]="row.data" 
    placeholder="请输入data"
    style="margin-right: 10px;"
  >
  <!-- 可选的删除按钮 -->
  <button (click)="deleteRow(i)">删除此行</button>
</div>

<!-- 新增行按钮 -->
<button (click)="addRow()">新增输入行</button>

<!-- 收集数据按钮 -->
<button (click)="collectAllData()" style="margin-left: 10px;">获取所有数据</button>

为什么这样能解决同步问题？ #

之前你用单个变量绑定所有输入框，比如[(ngModel)]="name"，所有输入框都指向同一个内存地址，所以修改任何一个都会同步到其他输入框。现在每个输入行绑定的是rowData数组里的独立对象，每个对象都是单独的内存引用，自然就不会互相影响啦。

测试一下：点击“新增输入行”会生成独立的输入框，每行输入内容互不干扰；点击“获取所有数据”，控制台就会输出你想要的JSON格式数组，比如：

[{"name":"aaa", "data":"111"},{"name":"bbb", "data":"222"},{"name":"ccc", "data":"333"}]

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