Angular 5中如何遍历带不同值的输入表单

看了你遇到的问题，核心原因是所有新增的输入框都绑定了同一个数据源，导致输入内容同步变化，这是因为你的数据结构和模板绑定逻辑没处理到位。下面一步步帮你修正：

1. 修正组件的数据结构与方法 #

首先，你当前的instrumentsData.particulars是字符串类型，应该改成数组来存储多个独立的输入项。同时调整addParticular方法，确保是往数组里添加新的空项：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 初始化particulars为数组，默认保留一个初始输入项
  instrumentsData = { particulars: [''] };

  addParticular() {
    // 往数组里添加新的空字符串，用于生成新的输入框
    this.instrumentsData.particulars.push('');
  }

  // 可选：添加删除输入项的方法
  removeParticular(index: number) {
    // 确保至少保留一个输入项（可根据需求调整）
    if (this.instrumentsData.particulars.length > 1) {
      this.instrumentsData.particulars.splice(index, 1);
    }
  }

  // 添加trackBy方法优化渲染性能
  trackByIndex(index: number): number {
    return index;
  }
}

2. 修正模板的遍历与绑定 #

在HTML模板里，用*ngFor遍历particulars数组，每个输入框绑定数组对应的索引项，这样每个输入框就拥有独立的数据源了：

<!-- Component.html -->
<div class="form-group">
  <button (click)="addParticular()" class="button-box">
    <i class="material-icons">add_box</i>
  </button>
  <ul class="form-fields">
    <!-- 遍历数组，每个项对应一个独立的输入框 -->
    <li *ngFor="let item of instrumentsData.particulars; let i = index; trackBy: trackByIndex">
      <input 
        type="text" 
        class="form-control" 
        [(ngModel)]="instrumentsData.particulars[i]"
        placeholder="输入详情"
      >
      <!-- 可选：添加删除按钮 -->
      <button (click)="removeParticular(i)" class="delete-btn">
        <i class="material-icons">delete</i>
      </button>
    </li>
  </ul>
</div>

关键说明 #

• 独立绑定：通过[(ngModel)]="instrumentsData.particulars[i]"让每个输入框绑定数组的对应索引项，输入内容会独立存储在数组的不同位置，不会互相干扰。
• trackBy优化：使用trackBy: trackByIndex可以避免数组变化时重新渲染所有输入框，提升页面性能，尤其是输入项较多时效果明显。
• 初始项设置：初始化数组时添加一个空字符串，确保页面加载时就有一个输入框，符合常规表单使用习惯。

这样修改后，点击add_box新增的输入框就会拥有独立的输入值，不会再出现所有框同步变化的问题了。

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