Angular 6中如何将JSON数组值填充到多个手风琴表单中？

我来一步步帮你解决多手风琴表单的数据填充问题，咱们从数据结构、API逻辑到模板绑定逐一调整：

第一步：定义类型化数据结构 #

首先给表单数据定义清晰的类型，避免无意义的数字存储，让代码更易维护。在你的TS文件里添加：

// 匹配JSON中AdditionalDetails的结构
interface AdditionalDetail {
  No: string;
  Circle: string;
  Src: string;
}

// 将historyT改为该接口的数组，替代原来的数字数组
historyT: AdditionalDetail[] = [];

第二步：调整API数据获取逻辑 #

你的APIGet函数需要直接把返回的AdditionalDetails数组赋值给historyT，而不是手动push数字。修改后示例：

APIGet() {
  // 替换为你实际的API请求，以下是模拟你的响应数据
  const apiResponse = [{ 
    "Key": "S1552115431598", 
    "Record": { 
      "AdditionalDetails": [
        { "No": "S1552115431598", "Circle": "CHE", "Src": "UC1" }, 
        { "No": "S1552115431598", "Circle": "JAR", "Src": "UC2" }, 
        { "No": "S1552115431598", "Circle": "MUM", "Src": "UC3" } 
      ], 
      "Category": "Education", 
      "Date": "09-03-2019", 
      "Desc": "nbhbnbnb", 
      "Time": "12:11 PM", 
      "No": "S1552115431598" 
    } 
  }];

  // 提取AdditionalDetails数组，直接赋值给historyT，自动渲染对应数量的手风琴
  this.historyT = apiResponse[0].Record.AdditionalDetails;
}

建议在组件初始化时就加载数据，而不是仅点击Add按钮时调用：

ngOnInit() {
  this.APIGet();
}

第三步：模板双向数据绑定修改 #

让每个手风琴表单字段和historyT的数据自动绑定，注意每个表单控件的name必须唯一，用索引区分：

<mat-accordion>
  <mat-expansion-panel *ngFor="let tform of historyT; let i = index">
    <mat-expansion-panel-header>
      <mat-panel-title> Additional Information {{ i+1 }} </mat-panel-title>
      <mat-panel-description> Sample Description {{ i+1 }} </mat-panel-description>
    </mat-expansion-panel-header>
    <mat-divider></mat-divider>
    <form>
      <div class="row mt-3">
        <mat-form-field class="col-sm-12">
          <!-- 双向绑定Circle字段，name加索引确保唯一 -->
          <input matInput placeholder="Circle" [(ngModel)]="tform.Circle" name="circle-{{i}}">
        </mat-form-field>
        <mat-form-field class="col-sm-12">
          <!-- 双向绑定Src字段，同样设置唯一name -->
          <input matInput placeholder="source" [(ngModel)]="tform.Src" name="source-{{i}}">
        </mat-form-field>
      </div>
    </form>
  </mat-expansion-panel>
</mat-accordion>

注意：要在你的模块（如AppModule）中导入FormsModule，否则[(ngModel)]无法生效：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他导入项
    FormsModule
  ]
})
export class AppModule { }

第四步：调整新增表单逻辑 #

点击Add按钮时，需要push一个空的AdditionalDetail对象，而不是数字：

onCreateAccr() {
  // 新增空表单数据，手风琴会自动生成新面板
  this.historyT.push({ No: '', Circle: '', Src: '' });
}

核心要点总结 #

• 用类型化数组存储表单数据，避免无意义的数字，让数据逻辑更清晰
• 双向绑定[(ngModel)]替代手动setValue，实现表单与数据的自动同步
• 确保每个表单控件的name唯一，否则Angular无法区分不同表单
• API返回数据直接赋值给historyT，*ngFor会自动渲染对应数量的手风琴面板

这样修改后，你的JSON数据就能自动填充到对应的手风琴表单，新增的表单也能正常绑定数据啦！

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