带参数的Angular 2 HTTP POST调用

时间:2017-05-18 12:46:44

标签: angular angular2-services

我有一个ASP.Net Web API方法如下 -

public class DashboardController : ApiController
    {
        [HttpPost]
        public TaskListModels[] getTaskListByUserId([FromBody] LoginModels loginModels)
        {
            DataTable _taskListDataTable = new DataTable();
            List<TaskListModels> _taskList = new List<TaskListModels>();
            try
            {
                if(!string.IsNullOrEmpty(loginModels.userId))
                {
                    SQLHelper sqlHelper = new SQLHelper(ConfigurationManager.ConnectionStrings["Hr_Platform_Dev_ConnString"].ConnectionString.ToString());
                    sqlHelper.Parameters.AddWithValue("@userId", loginModels.userId);
                    _taskListDataTable = sqlHelper.ReturnDataTableFromStoredProcedure("[dbo].[HRPlatform_Dashboard_Tasklist_Select]");
                }
        ....
        ....

我有一个Angular 2服务方法如下 -

//Get Task List of a User
    public getTaskList(loginModel: LoginCredentialsModel): Observable<TaskListModel[]>{
        console.log('Service - TaskListService : Method - getTaskList : Params - ' + loginModel.userId);
        let headers = new Headers({ 'Content-Type': 'application/json' });

        this._requestOptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this._httpHelperService.apiUrl + 'Dashboard/getTaskListByUserId',
            headers: headers,
            body: JSON.stringify({ 'userId': loginModel.userId })

        });
        console.log('Get Task List - POST Request Query : '+JSON.stringify(this._requestOptions));
        return this._http.request(new Request(this._requestOptions)).map(this._httpHelperService.extractData).catch(this._httpHelperService.handleError); 
    }

其中LoginCredentialsModel是Model类,如下所示 -

export class LoginCredentialsModel {
    userId: any;
}

我从我的一个组件调用service方法来从API方法获取数据,如下所示 -

public loadTask() 
{
    console.log('Component : Dashboard Component - Method : loadTask');
    //Set the current 
    this._taskListService.getTaskList('012345').subscribe(
        data => this.taskListItems = data,
        error => this._errorLoggerService.logError(error, 'Dashboard/TaskList Component'),
        () => console.log("Task List For User Id - 012345 + "\n" + JSON.stringify(this.taskListItems)));
}

POST调用能够访问API方法但由于某种原因,当我调试API时,userId参数显示为null。 我还在控制台上记录了如下所示的请求选项,其中看起来正文为空{}。 获取任务列表 - POST请求查询:

{"method":1,"headers":{"Content-Type":["application/json"]},"body":"{}","url":"http://localhost:8080/api/Dashboard/getTaskListByUserId","withCredentials":null,"responseType":null}

为什么没有发布参数?请帮忙。任何帮助将不胜感激。

谢谢, 阿米特阿南德

2 个答案:

答案 0 :(得分:0)

在您的代码中,您需要做一些更改

    //Get Task List of a User
        public getTaskList(loginModel: LoginCredentialsModel): Observable<TaskListModel[]>{
            console.log('Service - TaskListService : Method - getTaskList : Params - ' + loginModel.userId);
            let headers = new Headers({ 'Content-Type': 'application/json' });

//instead of JSON.stringify try this

var postdata = "userId="+loginModel.userId;

            this._requestOptions = new RequestOptions({
                method: RequestMethod.Post,
                url: this._httpHelperService.apiUrl + 'Dashboard/getTaskListByUserId',
                headers: headers,
                body: postdata

            });
            console.log('Get Task List - POST Request Query : '+JSON.stringify(this._requestOptions));
            return this._http.request(new Request(this._requestOptions)).map(this._httpHelperService.extractData).catch(this._httpHelperService.handleError); 
    }

答案 1 :(得分:0)

您正在调用这样的方法:

{"accountNumber":"1-1", detail:{"number": "1","accountGroup":"1", "editable":"false" , "amount":100 }}

但此方法需要一个对象(this._taskListService.getTaskList('012345')...

因此,当您尝试在LoginCredentialsModel方法中访问loginModel.userId时,它将被取消定义,因为您正在尝试访问getTaskList的属性。

解决方案可能是将其包装在对象中:

string