Angular http post error: невозможно прочитать свойство 'post' из неопределенного

Question

Я пытаюсь сделать мой первый запрос HTTP POST. У меня нормально работает запрос GET (в той же службе), но когда я пытаюсь сделать запрос POST, я получаю сообщение об ошибке

ОШИБКА TypeError: Невозможно прочитать свойство 'post' из неопределенного в ApiService.push ../ SRC / приложения / услуги / api.service.ts.ApiService.getTracsStartEvents (api.service.ts: 57)

Я использую его так же, как использую запрос GET, в том же файле. Я не понимаю, почему запрос POST не работает. У меня должно быть что-то неправильно синтаксически. Кто-нибудь может указать мне правильное направление?

import { Device } from '../shared/device';
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class ApiService {
  TRACS_URL = '<REMOVED>';
  DELORME_LOCATE_URL = '<REMOVED>';

  apiKey = '<REMOVED>';
  getAllDeviceAPI = 'PApps_AircraftInfo';
  getDeviceByIMEIAPI = 'PApps_AircraftInfo/FindByIMEI/';
  getDeviceByTailNumberAPI = 'PApps_AircraftInfo/FindByTailNumber/';
  getDeviceByCallsignAPI = 'PApps_AircraftInfo/FindByCallsign/';
  getTracsStartEventsAPI = 'GetStartTrackEvents';

  constructor(private httpClient: HttpClient) {}

  public createDevice( device: Device ){}

  public updateDevice( device: Device ) {
    console.log('going to call API to update device: ', device)
  }

  public deleteDevice( device: Device ) {
    console.log('going to call API to delete device: ', device);
  }

  public getDeviceByIMEI( imei: string ) {
    return this.httpClient.get<Device[]>(`${this.TRACS_URL}/${this.getDeviceByIMEIAPI}/${imei}?apikey=${this.apiKey}`);
  }

  public getDeviceByTailNumber( tailNumber: string ) {
    return this.httpClient.get<Device[]>(`${this.TRACS_URL}/${this.getDeviceByTailNumberAPI}/${tailNumber}?apikey=${this.apiKey}`);
  }
  public getDeviceByCallsign( callsign: string ) {
    return this.httpClient.get<Device[]>(`${this.TRACS_URL}/${this.getDeviceByCallsignAPI}/${callsign}?    apikey=${this.apiKey}`);
  }
  public getAllDevices( url?: string ) {
    return this.httpClient.get<Device[]>(`${this.TRACS_URL}/${this.getAllDeviceAPI}?apikey=${this.apiKey}`);
  }

  public getTracsStartEvents( imeiList: string[] ) {
    console.log('imeiList: ', imeiList );
    const httpHeaders = new HttpHeaders({
        'x-api-key': 'Ra4GyPWuzU1PKDKdmHyyK4WlMKV7v3j4JQhaU7i8',
        'Content-Type': 'application/json-patch+json',
        'Cache-Control': 'no-cache',
    });
    let options = {
      headers: httpHeaders
    };
    return this.httpClient.post<any[]>    (`${this.DELORME_LOCATE_URL}/${this.getTracsStartEvents}`,
      {
        data: { arr_imei: imeiList,
                searchType: 'REALTIME',
              }
      }, options ).subscribe( res => {
        console.log('query result:', res );
      });
    }
}

Вот где я вызываю функцию записи (это из другой службы, которая должна получать обновления местоположения):

import { Injectable } from '@angular/core';
import { ApiService } from './api.service';

import { GeoJson } from '../shared/geo-json';

@Injectable({
  providedIn: 'root'
})

export class PositionUpdateService {
  positionUpdate: GeoJson;

  constructor(private apiService: ApiService,
              ) {
    this.positionUpdate = new GeoJson( 'Feature',
    {type: 'Point', coordinates: [-121.0, 37.5, 1000]} );
    //console.log('posUpdate: this.positionUpdate: ', this.positionUpdate );
 }

  getMissionStartEvents( devices ) {
    console.log('posUpdate svc, getMissionStartevents, imeis: ', devices);
    const events =  this.apiService.getTracsStartEvents( devices );
    console.log(events);
  }
}

и с чего все начинается в моем HomeComponent:

export class HomeComponent implements OnInit, OnChanges {
   constructor(public appSettingsService: AppSettingsService,
               public layerControlDialogComponent: MatDialog,
               private devicesToTrackService: DevicesToTrackService,
               private positionUpdateService: PositionUpdateService,
               private httpClient: HttpClient) { }
  startTracking(devices) {
     console.log('going to start tracking ', devices);
     this.positionUpdateService.getMissionStartEvents(devices)
  }

Answer 1

Во-первых, http.get и http.post возвращают наблюдаемые, желание не будет выполнено, пока вы не подпишетесь на него, например:

this.apiService.getTracsStartEvents(devices).subscribe()

Во-вторых, внедрение зависимостей в Angular не работаетthis.

1. Не используйте новое ключевое слово для создания экземпляра apiService, используйте его напрямую, как если бы вы использовали httpClient, просто используя this.apiService.

2. Наконец, убедитесь, что вы предоставили apiService, если нет, укажите это:

   @Injectable({providedIn: ‘root’})
   export class ApiService { ...
   

И метод get также не должен работать.Если вы попытаетесь подписаться на него, у вас будет та же ошибка, вероятно, из-за реализации apiService в конструкторе.

Answer 2

Обязательно комментируйте ApiService как Injectable():

@Injectable({
  providedIn: 'root',
})
export class ApiService {

Тогда не создавайте ApiService самостоятельно, для этого и нужна инъекция зависимостей. Он автоматически создаст экземпляр ApiService со своими зависимостями (в данном случае HttpClient):

export class PositionUpdateService {
  // The dependency injection will automatically instantiate ApiService
  constructor(private apiService: ApiService) {
   }

  // ...
}