Angular4 HttpClient 字符串化包含另一个对象的对象

Question

我尝试向其结构中包含另一个对象的对象的 API 发出发布请求，但出现错误。错误不清楚，但调试后得出的结论是请求中的json无效。

这是我的结构，我截断了 getter 和 setter 以保持代码最少：

export class Spot {
    protected _id: number;
    protected _name: string;
    protected _address: string;
    protected _city: City;
}

export class City {
    protected _id: number;
    protected _name: string;
}

这是我的服务：

import { Observable } from 'rxjs/Rx';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../../environments/environment.prod';
import { Injectable } from '@angular/core';
import { Spot } from './../../models/spot';

const spotUrl = environment.BASE_API_URL + 'blasti/spots';

@Injectable()
export class AdminSpotService {

  private headers = new HttpHeaders({'Content-Type': 'application/json', 'Accept': 'application/json'});

  constructor(private _http: HttpClient) { }

  getAllSpots(): Observable<Spot[]> {
    return this._http.get<Spot[]>(spotUrl);
  }

  createSpot(spot: Spot): Observable<Spot> {
    console.log(spot);
    return this._http.post<Spot>(spotUrl, spot, { headers: this.headers });
  }
}

console.log(spot) 给出： Spot {_name: "name", _address: "fefe", _city: "[object Object]"} address : (...) city : (...) id : (...) name : (...) _address : "fefe" _city : "[object Object]" _name : "name"

API 收到 {_name: "name", _address: "fefe", _city: "[object Object]"} 无效，因为 _city 未通过 post 方法字符串化。

PS：我使用 HttpModule + JSON.stringify(spot) 得到了相同的结果。 HttpClientModule 可用于 Angular 4.3 及更高版本，它通常在不指定 JSON.stringify() 的情况下对对象进行字符串化。

我希望一些角度的专家有一个解决方案。

感谢您的宝贵时间。

Answer 1

你是对的，从from获取信息时出现问题，这是我的代码：

<form [formGroup]="spotForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="name">
  <input type="text" formControlName="address">
  <select formControlName="city">
    <option *ngFor="let city of cities" [value]="city">{{city.name}}</option>
  </select>
  <button type="submit">Save</button>
</form>

和我的组件：

export class CreateSpotComponent {
  spotForm: FormGroup;
  cities: City[] = [new City({
    _name: 'Paris'
  })];

  constructor(private _formBuilder: FormBuilder, private _spotService: AdminSpotService) {
    this.createForm();
   }

   createForm() {
    this.spotForm = this._formBuilder.group({
       name: '',
       address: '',
       city: ''
     });
   }

   onSubmit() {
     const spotModel = this.spotForm.value;
     const saveSpot: Spot = new Spot({
      name: spotModel.name,
      city: spotModel.city
     });
     this._spotService.createSpot(saveSpot);
   }
}

那么如何从表单中获取正确的城市对象值而不是使用 [object Object] 呢？

谢谢