将循环结构转换为 Angular2 形式的 JSON 异常

Question

这是我第一次尝试向 JSON 提交数据。我正在尝试将其添加到 JSON 的 table，但出现以下错误

EXCEPTION: Error in ./FormComponent class FormComponent - inline template:2:32 caused by: Converting circular structure to JSON

我在网上看到了这个错误，但现在真的知道如何解决它了。我正在使用模型驱动的表单，如果有人能指出我哪里出错了，我将不胜感激。

form.component.html

<div class="container">
  <h2>User Data</h2>
  <form [formGroup] ="userForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" formControlName="name">
    </div>
    <div class="form-group">
      <label>Username</label>
      <input type="text" class="form-control" formControlName="username">
    </div>
    <div class="form-group">
      <label>Email</label>
      <input type="text" class="form-control" formControlName="email">
    </div>

    <div formGroupName="address">
    <div class="form-group">
      <label>Street</label>
      <input type="text" class="form-control" formControlName="street">
    </div>
    <div class="form-group">
      <label>Suite</label>
      <input type="text" class="form-control" formControlName="suite">
    </div>
    <div class="form-group">
      <label>City</label>
      <input type="text" class="form-control" formControlName="city">
    </div>
    <div class="form-group">
      <label>Postal</label>
      <input type="text" class="form-control" formControlName="postalcode">
    </div>
  </div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

</div>

form.component.ts

import { Component, OnInit } from '@angular/core';
import {UserService} from '../users.service';
import {Http} from '@angular/http';
import {Router} from '@angular/router';
import {FormGroup, FormControl} from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
  providers: [UserService]

})
export class FormComponent{
  private user;
  constructor(private _userService:UserService){


  }

userForm = new FormGroup({
name: new FormControl(),
username: new FormControl(),
email: new FormControl(),
address: new FormGroup({
  street: new FormControl(),
  suite: new FormControl(),
  city: new FormControl(),
  postalcode: new FormControl()

})

});
onSubmit(){
this._userService.addUser(this.userForm)
.subscribe(res => {
  this.user = res;
})

}
}

user.service.ts

import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
import {Http} from '@angular/http';
import {User} from './user';
@Injectable()
export class UserService{
constructor(private _http:Http){


}
getUsers(){
return this._http.get("https://jsonplaceholder.typicode.com/users")
.map(res=>res.json());

}
addUser(post){
return this._http.post("https://jsonplaceholder.typicode.com/users", JSON.stringify(post))
.map(res=> res.json());



}
}

附加代码

user.component.html

import {Component} from '@angular/core';
import 'rxjs/add/operator/map';
import {Http} from '@angular/http';
import {UserService} from './users.service';

@Component({
selector: 'user',
template: `
<div class="container">
  <h1>Users</h1>
<h2><a routerLink="newuser"><button class="btn btn-primary">Add User</button></a></h2>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Email</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody *ngFor="let user of _users">
      <tr>
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td><i class="glyphicon glyphicon-edit"></i></td>
            <td><i class="glyphicon glyphicon-remove"></i></td>
      </tr>

    </tbody>
  </table>
</div>
`,
providers: [UserService]

})


export class UsersComponent{

  private _users;
constructor(private _userService:UserService){
this._userService.getUsers()
.subscribe(res => {
this._users = res;

})

}


}

Answer 1

不需要JSON.stringify()，默认会序列化

编辑：你能试试这个吗？

this._userService.addUser(this.userForm.value)

将循环结构转换为 Angular2 形式的 JSON 异常

Converting circular structure to JSON EXCEPTION in Angular2 Form

angular2-forms

angular