Angular 5 Http Post не работает

Я вызываю POST API с помощью службы Angular 5

Сервисный файл

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse, HttpClientModule } from '@angular/common/http';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { HttpResponse } from 'selenium-webdriver/http';
import { IScheduleAPI } from '../interfaces/ischeduleAPI';
// import { Ischedule } from '../interfaces/ischedule';

@Injectable()
export class SchedulesService {
  apiURL = 'http://localhost:57863/api/Audit/';
  ScheduleDetail: IScheduleAPI[] = [];

  constructor(private http: Http) { }

  GetScheduleAPI(params, httpOptions) {
   return this.http.post<IScheduleAPI[]>(this.apiURL, params, httpOptions)
    .catch(this.errorHandler);
  }

  errorHandler(error: HttpErrorResponse) {
    return Observable.throw(error.message || 'Server Error');
  }
}

Я вызываю эту службу в своем Компоненте

import { Component, OnInit } from '@angular/core';
import { HttpClientModule, HttpHeaders } from '@angular/common/http';
import { IScheduleAPI } from '../interfaces/ischeduleAPI';
import { SchedulesService } from '../services/schedules.service';
import { Http, Response } from '@angular/http';

@Component({
  selector: 'app-schedules',
  templateUrl: './schedules.component.html',
  styleUrls: ['./schedules.component.css']
})
export class SchedulesComponent implements OnInit {
  Schedule: IScheduleAPI[];
  message: string;

  constructor(private sch: SchedulesService, private http: Http) { }

  ngOnInit() {
    const params = [{
      'ActionMethod': 'GetSchedule',
      'StaffCode': 'NA',
      'Password': 'NA'
    }];
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    this.sch.GetScheduleAPI(params, httpOptions).subscribe(data => this.Schedule = data,
      error => this.message = error);
  }
}

Теперь проблемы

1.] Он показывает ошибку, что ожидаемых аргументов типа 0, но 1 в строке

return this.http.post<IScheduleAPI[]>(this.apiURL, params, httpOptions)

Его внутренний служебный файл, это разметка, которую я использую из другого служебного файла, где он работает нормально.

После удаления IScheduleAPI [] он перестает показывать ошибку, но не обращается к API, а вместо этого показывает ошибку

Angular 5 Http Post не работает

Я использую Angular 5

Вы смешиваете как старые модули Http, так и новые модули HttpClient.

David 17.04.2018 10:47
Http устарел, используйте вместо него HttpClient.
mxr7350 17.04.2018 10:47

Просто замените constructor(private http: Http) { } на constructor(private http: HttpClient) { }. Похоже, у вас уже есть правильный импорт

David 17.04.2018 10:50

@David, он компилируется с HttpClient и попадает в api, но не ждет, пока api вернет результат, выполняя другой оператор до возврата результата

Tanwer 17.04.2018 11:03

@Jack: какой код выполняется перед возвратом? Вы ведь знаете, что HTTP-запросы асинхронны?

David 17.04.2018 11:05

@David этот сервисный вызов находится в ngOnInit, см. Мой код. Его результат должен быть возвращен в ngOnInit, как мне его синхронизировать?

Tanwer 17.04.2018 11:09

Извините, я не понимаю. После вызова GetScheduleAPI в ngOnInit в вашем коде ничего нет. Если вы хотите добавить что-то сразу после вызова, но чтобы оно выполнялось только после возврата http-запроса, вы можете преобразовать свой код для использования promises и await.async.

David 17.04.2018 11:13

вы можете попробовать с httpclient ??

Pranay Rana 17.04.2018 13:29
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
8
1 188
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, вы используете новый HttpClient везде, но только в конструкторе.

Все, что вам нужно сделать, это заменить

constructor(private http: Http) { }

с участием

constructor(private http: HttpClient) { }

как в SchedulesService, так и в SchedulesComponent

Другие вопросы по теме