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

这是我第一次尝试向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>

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;

})

}


}

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

<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>

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;

})

}


}

从'@angular/core'导入{Component}；
导入'rxjs/add/operator/map'；
从'@angular/Http'导入{Http}；
从“/users.service”导入{UserService}；
@组成部分({
选择器：“用户”，
模板：`
使用者
添加用户
名字
电子邮件
编辑
删除
{{user.name}
{{user.email}
`,
提供者：[用户服务]
})
导出类UsersComponent{
私人用户；
构造函数（private\u userService:userService）{
这是。_userService.getUsers（）
.订阅（res=>{
这是._users=res；
})
}
}

您不需要

JSON.stringify（）

，默认情况下它将被序列化

编辑：你能试试这个吗

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

---

您不需要

JSON.stringify（）

，默认情况下它将被序列化

编辑：你能试试这个吗

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

---

如果我删除JSON.stringify（），我仍然会收到相同的错误，因为它不再抛出错误。它的行为就像post通过控制台：XHR完成了加载：post“。但在我输出所有json用户的表中，未显示发布的用户。请参阅上面添加的user.component.html和屏幕截图我不知道JSONPlaceholder是否真正支持添加用户，它只是出于测试目的，总是返回相同的10个假用户。：）如果我删除JSON.stringify（），我仍然会收到相同的错误，因为它不再抛出错误。这就像帖子通过控制台：XHR完成加载：post“。但是在我输出所有json用户的表中，发布的用户没有出现。请参阅上面添加的user.component.html和屏幕截图。我不知道JSONPlaceholder是否真的支持添加用户，它只是为了测试目的，总是返回相同的10个假用户。：）