Json 如何将动态添加的行值从angular发送到java控制器

我创建了一个动态添加/删除行使用角度反应形式。正在添加和删除行。但如何将所有这些行值从Angular应用程序发送到java控制器

app.component.html

<div class="container">
<h3 class="page-header">Seasons</h3>
<button type="button" class="btn btn-primary" (click)="addTeam()">Add New Row</button><br/>
<form [formGroup] = "seasonsForm">
    <div formArrayName = "teamRows">
        <div *ngFor = "let team of seasonsForm.controls.teamRows.controls; let i=index" [formGroupName] = "i">
            <h4>Team- #{{i+1}}</h4>
            <div class="form-group">
                <label>Team Name</label>
                <input formControlName = "teamName" class="form-control">
            </div>
            <div class="form-group">
                <label>Stadium</label>
                <input formControlName = "stadiumName" class="form-control">
            </div>
            <div class="form-group">
                <label>Capacity</label>
                <input formControlName = "capacity" class="form-control">
            </div>
            <div class="form-group">
                <label>Founded</label>
                <input formControlName = "founded" class="form-control">
            </div>
            <div class="form-group">
                <label>Head Coach</label>
                <input formControlName = "headCoach" class="form-control">
            </div>
            <div class="form-group">
                <label>Last Season</label>
                <input formControlName = "lastSeason" class="form-control">
            </div>
            <button *ngIf = "seasonsForm.controls.teamRows.controls.length" (click) = "deleteTeam(i)" class="btn btn-danger">Delete Button</button>
        </div>
    </div>
</form>
<pre>{{ seasonsForm.value |json }}</pre>
</div>

季节
添加新行

团队-#{i+1}
队名
体育场
容量
成立
主教练
上一季
删除按钮
{{seassform.value | json}}

app.component.ts

createTeam(): void {
    if(seasonsForm.valid){
        this.httpClient.post<Teams>("http://localhost:8080/addTeam", seasonsForm.value);
          .subscribe( res => {
            alert("Successful");
          })
      };
}

从'@angular/core'导入{Component，OnInit}；
从“@angular/forms”导入{FormGroup、FormArray、FormBuilder、Validators}；
从“../service/http client.service”导入{Teams}；
@组成部分({
选择器：“应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
公共季节形式：FormGroup；
公共团队：团队[]；
构造函数（私有_fb:FormBuilder）{}
恩戈尼尼特（）{
this.季候窗体=this.\u fb.group({
teamRows:this.\u fb.array（[this.initTeamRows（）]））
});
}
获取formArr（）{
将此.seasonsForm.get（'teamRows'）作为FormArray返回；
}
initTeamRows（）{
将此返回。\u fb.group({
团队名称：['']，
体育场名称：['']，
容量：['']，
成立日期：['']，
主教练：['']，
上一季：['']
});
}
addTeam（）{
this.formar.push（this.initTeamRows（））；
}
删除团队（索引：编号）{
本表为表格删除（索引）；
}
}
createTeam（）：void{
此.httpClient.post（“http://localhost:8080/addTeam“，季节形式）；
.订阅（res=>{
警报（“成功”）；
})
};
出口班小组{
建造师(
公共团队名称：string，
公共体育场名称：字符串，
公共容量：字符串，
公众创建：字符串，
公共教练：字符串，
上一季公开：弦，
) {}
}

---

我试图发送整个formGroup（季节表单），但失败了。我对Angular比较陌生，我在谷歌上搜索过，但没有找到太多帮助。因此，在此方面的任何帮助都将不胜感激。

您需要在createTeam函数中发送表单值。如果您使用console.log（季节表单），您可以看到还有一些其他属性仅与表单有关。 此外，如果你想，你可以检查表格是否有效

onSubmit() {
    this.httpClient.post("http://localhost:8080/addTeams",JSON.stringify(this.seasonsForm.value))
  .subscribe((response: Response) => {

  })

    alert("Successful");
  }

createTeam（）：void{
如果（季节格式有效）{
此.httpClient.post（“http://localhost:8080/addTeam“，季节形式值）；
.订阅（res=>{
警报（“成功”）；
})
};
}

首先，如果您使用的是NoSQL数据库，那么您可以发送一个包含数组的JSON文件。所以在这里，我决定向服务器端发送一个包含数组值的json文件，然后将表单组名转换为json.Stringify。在服务器端，您可以以字符串格式检索json并对其进行解析，然后发送到DB。下面是代码

onSubmit() {
    this.httpClient.post("http://localhost:8080/addTeams",JSON.stringify(this.seasonsForm.value))
  .subscribe((response: Response) => {

  })

    alert("Successful");
  }