Angular //错误循环对象值// JSON圆形结构

Question

[我有一个反应形式，我希望能够推送到api，但是每次提交时，我都会收到“ Error！TypeError：”循环对象值“。

[根据我的研究，我了解到这是因为我的对象在某处引用了自己，而JSON无法处理它。我想我找到了对象引用本身（用箭头标记）所在的位置，但是我不知道如何避免使用它。

HTML表单

 <form [formGroup]="projectForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <input type="text" id="nameInput" formControlName="projectName" placeholder="Project Name">
      </div>
      <div class="form-group">
        <input type="text" id="languageTags" formControlName="projectLanguage" placeholder="Language Tags">
      </div>
      <div class="form-group">
        <input type="text" id="githubLink" formControlName="projectLink" placeholder="GitHub Link">
      </div>
      <div class="form-group">
        <input type="text" id="initDate" formControlName="projectDateInit" placeholder="Init Date & time">
      </div>
      <div class="form-group">
        <textarea type="text" id="nameInput" formControlName="projectDetails" placeholder="Details"></textarea>
      </div>
      <div class="btnContainer">
        <button class="btn btn-primary btnMarginLeft" (click)="closeForm()">Cancel</button>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>

表单组件

import { ServerControlService } from './../server-control.service';
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';


@Component({
  selector: 'project-form',
  templateUrl: './project-form.component.html',
  styleUrls: ['./project-form.component.scss']
})
export class ProjectFormComponent implements OnInit {

  projectForm: FormGroup;                       <--- Is this where I am making a circular object?

  constructor(private _serverControl: ServerControlService) { }

  ngOnInit() {
    this.projectForm = new FormGroup({
      projectName: new FormControl(),
      projectLanguage: new FormControl(),
      projectLink: new FormControl(),
      projectDateInit: new FormControl(),
      projectDetails: new FormControl()
    });
  }

  @Output() closeFormEvent = new EventEmitter();

  closeForm() {
    this.closeFormEvent.emit();
  }
  onSubmit(): void {
    this._serverControl.projectInit(this.projectForm)
      .subscribe(
        data => console.log('Success', data),
        error => console.error('Error!', error)
      )
  }
}

服务器服务组件

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ServerControlService {

  _url = '/assets/data/projectsDatabase.json';

  constructor(private _http: HttpClient) { }

  projectInit(projectData) {
    return this._http.post<any>(this._url, projectData);
  }

}

Answer 1

您应该只执行此this._serverControl.projectInit(this.projectForm.value)，而不要执行此this._serverControl.projectInit(this.projectForm)

this.projectForm.value包含具有与您定义的结构相同的对象，并带有每个字段的值。 this.projectForm包含表单行为，并不意味着要序列化。