Angular 2 HTTP POST Call with parameters

Question

I have a ASP.Net Web API method as follows --

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]");
                }
        ....
        ....

I have an Angular 2 service method as follows --

//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); 
    }

Where LoginCredentialsModel is a Model class as follows --

export class LoginCredentialsModel {
    userId: any;
}

I am calling the service method from one of my component to get the data from the API method as follows --

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)));
}

The POST call is able to reach the API method but for some reason the userId parameter is appearing as null when I am debugging the API. I have also logged the request option on the console that looks like follows, where it appears that that the body is empty {}. Get Task List - POST Request Query :

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

Why the parameters are not getting posted ? Please help. Any Help would be appreciated.

Thanks, Amit Anand

Answer 1

You are calling your method like this:

this._taskListService.getTaskList('012345')...

but this method expects an object (LoginCredentialsModel)

So when you try to access loginModel.userId inside your getTaskList method it will be undefined because you are trying to access a property of a string.

A solution might be to wrap it in an object:

this._taskListService.getTaskList({userId: '012345'})...