Angular 2: реализация HTTP POST-запроса

0

В моем приложении Angular 1.x я делаю следующее на форме submit.

$scope.submit = function() {
    console.log('Saving Form Data..');
    $scope.selection_array = [];
    for ( var j = 0; j < $scope.checkboxlist.length; j++ ){
        if ($scope.checkboxlist[j].selected) {
            console.log($scope.checkboxlist[j]);
            $scope.selection_array.push($scope.checkboxlist[j].key);
        }
    }

    if ($scope.selection_array.length>0) {
        $http({
            method : 'POST',
            url : BASE_URL + '/user/selection',
            headers : {
                'Content-Type' : 'application/json'
            },
            params : {
                access_token : localStorage.getItem("access_token")
            },
            data : $scope.selection_array
        }).success(function(response) {
            console.log('response=>' + response);
            $window.alert('Your items have been saved successfully');
        }).error(function() {
            console.log('failure in updaing');
            $window.alert('Error saving items. Please try again');
        });
    } else {
        $window.alert('Please select one or more items');
    }
}

Я делаю здесь, получая выбранные элементы из списка флажков и сохраняя этот список в базе данных, вызывая вызов службы backend. Теперь мне нужно преобразовать этот код в Angular 2.

ПЫТАЛСЯ

В моем файле service.ts я использую следующее.

saveUserInterests(selected_interests) {
    console.log(selected_interests);

    var headers = new Headers();
    headers.append('Content-Type', 'application/json');

    var params = new URLSearchParams();
    params.set('access_token', localStorage.getItem('access_token'));

    return this.http.post('http://localhost:8080/user/interests',
        JSON.stringify(selected_interests),
        {
            headers: headers,
            search: params
        }).map(res => res.json());
}

Затем я вызываю эту службу, как показано ниже в файле interst.ts.

private selected_interests;

onSubmit() {
    console.log('Inside onsubmit');
    var selected_interests = [];
    for (var j = 0; j < this.interests.length; j++) {
        if (this.interests[j].selected) {
            console.log(this.interests[j]);
            selected_interests.push(this.interests[j].key);
        } else {
            console.log('else');

        }
    }
    this.selected_interests = selected_interests;
    console.log(this.selected_interests);


    this.dataService.saveUserInterests(this.selected_interests).subscribe(
        (res) => {
            console.log('response=>' + res);
            alert('Your items have been saved successfully');
        },
        (error) => {
            console.log('failure in updaing');
            alert('Error saving items. Please try again');
        });
}

Это дает следующую ошибку в журнале консоли.

Rx.js:10982 Uncaught EXCEPTION: Error during evaluation of "ngSubmit"
ORIGINAL EXCEPTION: TypeError: Cannot read property 'subscribe' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'subscribe' of undefined

Любые предложения высоко оценены

Теги:
angular
angular2-services

1 ответ

0

Для части HTTP, вот способ сделать в Angular2:

constructor(private http:Http, private window:Window) {
}

submit() {
  var selectionArray = (...)

  var headers = new Headers();
  headers.append('Content-Type' : 'application/json');

  var params = new URLSearchParams();
  params.set('access_token', localStorage.getItem('access_token'));

  this.http.post(BASE_URL + '/user/selection',
         JSON.stringify(selectionArray),
         {
           headers : headers,
           search: params
         }).map(res => res.json())
         .subscribe(
           (data) => {
             console.log('response=>' + response);
             this.window.alert('Your items have been saved successfully');
           },
           (error) => {
             console.log('failure in updaing');
             this.window.alert('Error saving items. Please try again');
         });
}

См. Эти ссылки для получения дополнительной информации:

  • 0
    Пробовал это .. Но я получаю ошибку. Я опубликовал то, что я попробовал под TRIED
  • 0
    Вы импортируете это в сервис: import 'rxjs/Rx'; ?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню