无法在Angular 2中使用PUT请求更新用户

时间:2017-03-25 22:26:59

标签: angular put

我正在构建一个Angular 2应用程序,我创建了一个在线API,它允许我更新具有名称,电子邮件和字段的用户。 我用Rest Easy测试了它,我可以更新任何用户但是当我尝试从Angular 2更新数据库时没有任何变化,我想要做的是以下内容:

updateUser(user: User) {
    let url = 'http://example.com/api/user/update' + user.user_id;
    console.log(JSON.stringify(user)); // this prints out in console correctly

    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http
        .put(url, JSON.stringify(user), { headers: headers })
        .map(res => res.json());
}

完整的 user.service.ts 文件

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from "@angular/http";
import { Observable } from "rxjs/Rx";
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {

    constructor(private http: Http) {
        console.log('user service initialized');
    }


    // this works perfectly
    getUsers() {
        return this.http.get('http://example.com/api/users')
            .map(res => res.json());
    }

    // this also works perfectly
    getUser(userId: number) {
        return this.http.get('http://example.com/api/user/' + userId)
            .map(res => res.json());
    }

    // this is where nothing happens, only prints in console the object
    // but no errors are displayed
    updateUser(user: User) {
        let url = 'http://henriquealho.esy.es/public/api/user/update/' + user.user_id;
        console.log(JSON.stringify(user)); // this prints out in console correctly

        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http
            .put(url, JSON.stringify(user), { headers: headers })
            .map(res => res.json());
    }

}

interface User {
    user_id: number,
    name: string,
    email: string,
    about: string
}

任何人都知道我做错了什么? 谢谢!

1 个答案:

答案 0 :(得分:2)

如果您想通过HTTP客户端从Angular发送数据,请不要使用stringify,Angular将处理发送数据所需的所有进程。只需使用以下内容:

.put(url, user, { headers: headers })

PS。如果由于内容类型检测而发送json数据,Angular会将content-typepost请求的put标头设置为application/json。请参阅source code

编辑(来自评论):

您必须订阅已创建的observable才能运行您的请求。使用this.userServie.updateUser(user).subscribe()运行您的请求。在完成1次请求后,可能会在take(1)来电之后考虑map {/ 1}}。