在Angular2中将循环结构转换为JSON EXCEPTION形式

Question

这是我第一次尝试向JSON提交数据。 我试图将它添加到JSON的表，但我得到以下错误

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)