HTTP-запрос Get не отправляется на указанный URL-адрес

Я новичок в Angular и строил эту систему с нуля. Я написал следующий метод для отправки запроса GET к конечной точке на серверной стороне. Метод вызывается в методе ngOnInit.

    public getExistingDrp():Observable<any>{
    const url = "http://localhost:2252/api/mldetails/mldropdown?AgID=49&CID=37&intExist=0";
    const token = "test-token";
    const headers = new HttpHeaders(
      {
        'Authorization': 'Bearer ' + token
      }
    );
    return this.http.get(url ,{headers: headers})
  }

Вызов не доходит до серверной части. Я добавил точки останова к внутренним методам, и они срабатывают, когда я отправляю запрос от почтальона. Но из этого приложения ничего не происходит, даже ошибки. Также ничего не отображается на вкладке «Сеть» в браузере. Консоль выдает следующий вывод.

    _Observable {
  source: _Observable {
    source: _Observable {
      source: [_Observable],
      operator: [Function (anonymous)]
    },
    operator: [Function (anonymous)]
  },
  operator: [Function (anonymous)]
}

мой app.module.ts выглядит следующим образом

    import { NgModule } from '@angular/core';
import {
  BrowserModule,
  provideClientHydration,
} from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { TransferMLOComponent } from './pages/transfer-mlo/transfer-mlo.component';
import { MLOcomponentsComponent } from './pages/existing-mlodetails/allMLOdetails/mlocomponents/mlocomponents.component';
import { MLOdetailsNavbarComponent } from './pages/existing-mlodetails/mlodetails-navbar/mlodetails-navbar.component';
import { MLOtarrifComponent } from './pages/existing-mlodetails/allMLOdetails/mlotarrif/mlotarrif.component';
import { MLOlocationsComponent } from './pages/existing-mlodetails/allMLOdetails/mlolocations/mlolocations.component';
import { MLOdamagesComponent } from './pages/existing-mlodetails/allMLOdetails/mlodamages/mlodamages.component';
import { MLOrepairComponent } from './pages/existing-mlodetails/allMLOdetails/mlorepair/mlorepair.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { provideHttpClient, withFetch, HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SidebarComponent,
    TransferMLOComponent,
    MLOcomponentsComponent,
    MLOdetailsNavbarComponent,
    MLOtarrifComponent,
    MLOlocationsComponent,
    MLOdamagesComponent,
    MLOrepairComponent,
  ],
  imports: [BrowserModule, AppRoutingModule, NgbModule, HttpClientModule],
  providers: [provideClientHydration(), provideHttpClient(withFetch())],
  bootstrap: [AppComponent],
})
export class AppModule {}

Я что-то пропустил? Есть ли что-то, что я делаю неправильно?

Тестирование функциональных 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
0
56
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

В этой проблеме вам следует проверить правильность данных конечной точки и типа метода, а также учетные данные серверной части.

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

getExistingDrp возвращает Observable. Чтобы выполнить HTTP-запрос, вам просто нужно вызвать метод subscribe следующим образом:

ngOnInit() {
  this.getExistingDrp().subscribe();
}

Подробнее об этом — https://angular.io/guide/http-request-data-from-server#starting-the-request

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