Angular 2 HTTP POST Вызов с параметрами

Question

У меня есть метод 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;
}

Я вызываю метод службы из одного из моих компонентов, чтобы получить данные из метода 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, но по какой-то причине параметр userId отображается как ноль, когда я отлаживаю API. Я также зарегистрировал опцию запроса на консоли, которая выглядит следующим образом, где кажется, что это тело пусто {}. Получить список задач - POST-запрос:

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

Почему параметры не публикуются? Пожалуйста помоги. Любая помощь будет оценена.

Спасибо, Амит Ананд

Answer 1

Вы вызываете свой метод так:

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

но этот метод ожидает объект (LoginCredentialsModel)

Поэтому, когда вы пытаетесь получить доступ loginModel.userId внутри вашего getTaskList Метод будет неопределенным, потому что вы пытаетесь получить доступ к свойству string,

Решение может заключаться в том, чтобы обернуть его в объект:

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

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

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