如何在ngFor循环中用ngModel绑定重复条目到不同变量？

核心思路 #

你遇到的问题本质是可重复条目需要独立的数据源，不能共享同一个field的value。结合你提供的JSON结构，我们可以在组件层对原始数据做转换：将关联到accordion的fieldContainer（比如示例中的person）处理成实例数组，每个实例对应一个独立的人员表单；非关联accordion的容器（比如event）保持单个对象。这样既保留了ngModel的便捷性，又能满足动态新增条目、数据独立的需求。

1. 数据结构转换（组件内处理） #

首先修正你示例数据的语法错误（原始数据应为数组而非对象），然后通过转换把原始数据处理成适合绑定的结构：

// 定义类型辅助代码可读性
interface Section {
  id: string;
  name: string;
}
interface Accordion {
  id: string;
  name: string;
  sectionId: string;
}
interface FieldContainer {
  id: string;
  name: string;
  sectionId: string | null;
  accordionId: string | null;
}
interface Field {
  id: string;
  fieldName: string;
  fieldContainerId: string;
  value: any;
}

// 转换后用于绑定的结构
interface RepeatingInstance {
  container: FieldContainer;
  fields: { [key: string]: any }; // 用fieldName作为key，方便ngModel绑定
}
interface FormState {
  sections: {
    [sectionId: string]: {
      section: Section;
      accordions: {
        [accordionId: string]: {
          accordion: Accordion;
          instanceTemplate: RepeatingInstance; // 预存模板，用于新增实例
          repeatingInstances: RepeatingInstance[];
        };
      };
      nonRepeatingContainers: {
        [containerId: string]: {
          container: FieldContainer;
          fields: { [key: string]: any };
        };
      };
    };
  };
}

// 原始数据（修正语法后）
originalSections: Section[] = [{"id":"0","name":"first section"}];
originalAccordions: Accordion[] = [{"id":"0","name":"people","sectionId":"0"}];
originalFieldContainers: FieldContainer[] = [
  {"id":"0","name":"person","sectionId":null, "accordionId":"0"},
  {"id":"1","name":"event","sectionId":"0", "accordionId":null}
];
originalFields: Field[] = [
  {"id":"1","fieldName":"first_name","fieldContainerId":"0","value":null},
  {"id":"2","fieldName":"last_name","fieldContainerId":"0","value":null},
  {"id":"3","fieldName":"event_location","fieldContainerId":"1","value":null},
  {"id":"4","fieldName":"event_name","fieldContainerId":"1","value":null}
];

formState: FormState = {};

ngOnInit() {
  this.transformRawData();
  // 默认初始化一个可重复实例（比如默认显示一个人员表单）
  this.addRepeatingInstance(this.formState['0'].accordions['0']);
}

// 转换原始数据为可绑定的结构
transformRawData() {
  this.originalSections.forEach(section => {
    this.formState[section.id] = {
      section,
      accordions: {},
      nonRepeatingContainers: {}
    };

    // 处理当前section下的所有accordion（对应可重复表单）
    const sectionAccordions = this.originalAccordions.filter(a => a.sectionId === section.id);
    sectionAccordions.forEach(accordion => {
      const repeatingContainer = this.originalFieldContainers.find(fc => fc.accordionId === accordion.id);
      if (repeatingContainer) {
        // 生成该容器的字段模板
        const fieldsTemplate = this.originalFields
          .filter(f => f.fieldContainerId === repeatingContainer.id)
          .reduce((acc, field) => {
            acc[field.fieldName] = field.value;
            return acc;
          }, {} as { [key: string]: any });
        
        this.formState[section.id].accordions[accordion.id] = {
          accordion,
          instanceTemplate: { container: repeatingContainer, fields: fieldsTemplate },
          repeatingInstances: []
        };
      }
    });

    // 处理非关联accordion的容器（不可重复表单）
    const nonRepeatingContainers = this.originalFieldContainers.filter(fc => fc.accordionId === null && fc.sectionId === section.id);
    nonRepeatingContainers.forEach(container => {
      const fields = this.originalFields
        .filter(f => f.fieldContainerId === container.id)
        .reduce((acc, field) => {
          acc[field.fieldName] = field.value;
          return acc;
        }, {} as { [key: string]: any });
      
      this.formState[section.id].nonRepeatingContainers[container.id] = { container, fields };
    });
  });
}

2. 实现新增可重复实例的方法 #

通过复制预存的模板，生成独立的表单实例，确保每个实例的字段数据互不干扰：

addRepeatingInstance(accordionData: any) {
  // 深拷贝模板避免引用传递
  const newInstance = JSON.parse(JSON.stringify(accordionData.instanceTemplate));
  accordionData.repeatingInstances.push(newInstance);
}

3. 模板渲染与ngModel绑定 #

利用ngFor遍历转换后的结构，直接绑定[(ngModel)]到每个实例的字段值：

<div *ngFor="let sectionEntry of formState | keyvalue">
  <h2>{{ sectionEntry.value.section.name }}</h2>

  <!-- 渲染可重复的人员表单 -->
  <div *ngFor="let accordionEntry of sectionEntry.value.accordions | keyvalue">
    <h3>{{ accordionEntry.value.accordion.name }}</h3>
    <button (click)="addRepeatingInstance(accordionEntry.value)">添加新人员</button>

    <!-- 遍历每个人员实例 -->
    <div *ngFor="let instance of accordionEntry.value.repeatingInstances" class="person-form">
      <div *ngFor="let fieldEntry of instance.fields | keyvalue">
        <label>{{ fieldEntry.key.replace('_', ' ') | titlecase }}</label>
        <input [(ngModel)]="fieldEntry.value" type="text">
      </div>
      <hr>
    </div>
  </div>

  <!-- 渲染不可重复的事件表单 -->
  <div *ngFor="let containerEntry of sectionEntry.value.nonRepeatingContainers | keyvalue">
    <h3>{{ containerEntry.value.container.name }}</h3>
    <div *ngFor="let fieldEntry of containerEntry.value.fields | keyvalue">
      <label>{{ fieldEntry.key.replace('_', ' ') | titlecase }}</label>
      <input [(ngModel)]="fieldEntry.value" type="text">
    </div>
  </div>
</div>

4. 表单保存与加载 #

因为数据直接绑定在formState中，保存和加载只需序列化/反序列化该对象即可：

// 保存表单
saveForm() {
  const savedData = JSON.stringify(this.formState);
  // 可将savedData存储到后端或localStorage
  console.log('保存的表单数据:', savedData);
}

// 加载表单
loadForm(savedDataStr: string) {
  this.formState = JSON.parse(savedDataStr);
  // 确保每个accordion至少有一个实例
  Object.values(this.formState).forEach(sectionData => {
    Object.values(sectionData.accordions).forEach(accordionData => {
      if (accordionData.repeatingInstances.length === 0) {
        this.addRepeatingInstance(accordionData);
      }
    });
  });
}

关键优势 #

• 完全保留了通过JSON配置字段的需求，仅在组件层做数据转换，无需修改原始JSON结构。
• 每个可重复条目拥有独立的数据源，ngModel绑定不会出现数据同步的问题。
• 表单保存/加载逻辑简洁，直接操作formState即可。

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