Angular4 HttpClient stringify包含其他對象的對象

我嘗試發送一個包含另一個對象在他的結構中的對象的API的請求，但我有一個錯誤。錯誤不是很清楚，但經過調試後，我得出結論，請求中的json無效。Angular4 HttpClient stringify包含其他對象的對象

這裏是我的結構，我截斷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 {_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]"}這是因爲，不被交方法stringifyed _City的無效。

PS：我有與HttpModule + JSON.stringify（點）相同的結果。 HttpClientModule可用於Angular 4.3及更高版本，它通常在不指定JSON.stringify（）的情況下對對象進行字符串化。

我希望一些角度的專家有一個解決方案。

謝謝你的時間。

來源

2017-08-31 Zak

這是'console.log'之前字符串化，你可以看到它明顯是'_City：「的翻譯：」'有 –

_City也可這麼字符串化，我需要'_City： {「_name」：「Paris」，「_country」：「France」}'而不是Object。 – Zak

我的意思是在進入這個createPost函數之前，對象是壞的形式。 –

你是對的，問題來了從獲取信息的時候，這裏是我的代碼：

<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]呢？

謝謝

來源

2017-09-01 17:43:14 Zak

我發現解決方案，錯誤來自窗體，我不得不使用[ngValue] =「city」而不是[value] =「city」 – Zak

Angular4 HttpClient stringify包含其他對象的對象

回答

相關問題