I've been struggling with my angular service and can't seem to get it to make the necessary http request. This issue has been

order.service.ts

  process(order: Order): Observable<Order[] | null> {
    console.log("Initiating processing")
    return this.orders$.pipe(
      take(1),
      switchMap((orders) =>
        console.log("Inside switchmap")
        this._httpClient
          .post<Order>(this.baseUrl + 'process/', order, this.httpOptions)
          .pipe(
            map((newOrder) => {
              const result = [{ ...newOrder, ...orders }];
              this._orders.next(result);
              return result;
            })
          )
      )
    );
  }

order.component.ts

  submit() {
    const dialogRef = this.dialog.open(CreateOrderComponent, {
      data: {},
      width: '50%',
      disableClose: true
    });

    dialogRef
      .afterClosed()
      .pipe(
        filter(Boolean),
        tap((order) => this._orderService.process(order)),
        takeUntil(this._destroy)
      )
      .subscribe();
  }

I am encountering a problem where the switchmap does not log anything. However, when I submit my order, I can see the new order in the console. There is no HTTP request to the backend or any request logs in Chrome. I have also tried using pre-existing orders but to no avail. Any assistance on this issue would be greatly appreciated. Thank you.

Answer №1

The method you have created is returning an Observable<Client[] | null>. An Observable does not do anything until you subscribe to it, as mentioned by @Phix in the comments. Make sure to add .subscribe() to your method call.

dialogRef
      .afterClosed()
      .pipe(
        filter(Boolean),
        tap((client) => this._clientService.create(client)***.subscribe()***),
        takeUntil(this._destroy)
      )
      .subscribe();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scroll to the top on every Angular 5 route change

Currently, I am utilizing Angular 5 for my project. Within the dashboard interface, there are various sections with varying amounts of content. Some sections contain only a small amount of information, while others have large amounts of content. However, w ...

Show fixed position buttons

My Angular HTML form includes a grid setup, defined as follows: .grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2%; grid-auto-rows: 90%; } This grid creates two parallel rectangles. I have divs ...

Getting an updated object back using HttpClient in Angular 5

After updating the contact, I encountered an issue where I couldn't retrieve the updated object to update the view. Instead, I received {n: 1, nModified: 1, ok: 1}. Data Retrieval Service from API export class ContactService { url: string = &apos ...

Step-by-step guide to creating a custom wrapper in React that modifies the props for a component

Exploring React components for the first time and seeking assistance. I am interested in dynamically wrapping one component inside another and modifying its props. For instance, considering the following component: If we want to pass the key3 from a wrapp ...

Retrieve the final result from an observable after making several requests

In my application, there is a service layer that manages data and delivers it to components with the same value. When the value of isProcessed is false, I need to send requests to the API. The service will make 10 attempts every half a second. If the req ...

Implementing line breaks in Angular Template

I'm dealing with an angular page that includes a popup. The content of the popup is generated using the following code snippet: <div class="xs-12 form-group"> <div class="no-overflow" *ngIf="detail.Status; else em ...

Issue "Value of type '{}' cannot be assigned to parameter of type 'T | (() => T)'" encountered within a React component containing a type parameter

Currently, I am attempting to achieve the following: function SomeComponent<T>({ children }: PropsType) { const [configuration, setConfiguration] = useState<T>({}) } However, I am encountering this issue: The argument of type '{}&apos ...

Troubleshooting Issue with Chrome/chromium/Selenium Integration

Encountered an issue while attempting to build and start the application using "yarn start": ERROR:process_singleton_win.cc(465) Lock file cannot be created! Error code: 3 Discovered this error while working on a cloned electron project on a Windows x64 m ...

Obtaining attributes of a class from an object passed into the constructor

Consider the following code snippet: interface MyInterface { readonly valA: number; readonly valB: number; } class MyClass { readonly valA: number; readonly valB: number; constructor(props: MyInterface) { this.valA = props.val ...

What is the most effective way to combine information from two separate API endpoints for every individual item obtained?

I'm faced with a challenging issue that I need help resolving. Let me simplify it to explain it more clearly. There are two API endpoints - one that returns a list of persons, and another where I can request the pets owned by a person using their ID ...

What is the best way to deliver assets while running ng test with the newest version of angular-cli (beta 15 with webpack)?

During testing with ng test, I am facing an issue where all modules and components load correctly. However, the images included in <img> tags are not rendered properly because they are not being served from the /assets folder as they would be during ...

What is the best way to divide a string into an array containing both linked and non-linked elements?

I'm struggling to find the right solution to my problem. I need to create a view that is enclosed in a clickable div. The content will consist of plain text mixed with clickable URLs - the issue arises when clicking on a link also triggers the method ...

What is the best way to link together Angular observables?

In order for my component to make API requests, it needs to check if certain app preferences are set. Currently, I have implemented a method where the component's data is refreshed every 2 minutes using a timer: ngOnInit(): void { this.subscriptio ...

Import resolves Uncaught ReferenceError by preventing access to 'xx' before it is initialized

Currently, I am troubleshooting a peculiar error that has come up. Within my service file where all other services are stored, I have included the import of one component along with all the other services required by the frontend. import { VacationComponen ...

Data from graphql is not being received in Next.js

I decided to replicate reddit using Next.js and incorporating stepzen for graphql integration. I have successfully directed it to a specific page based on the slug, but unfortunately, I am facing an issue with retrieving the post information. import { use ...

Refresh Angular 6 Navbar on RouterLink Change

Having an issue with reloading the website while using angular 6 and a routerlink in a dropdown menu within my navbar. The problem arises when the routerlink does not reload the website, only changing the route. Initially, clicking a button in the dropdown ...

Exploring the power of Angular 10 components

Angular version 10 has left me feeling bewildered. Let's explore a few scenarios: Scenario 1: If I create AComponent.ts/html/css without an A.module.ts, should I declare and export it in app.module.ts? Can another module 'B' use the 'A ...

Specify typing for a class when passing it as a function parameter

Initially, let's take a look at the central Interface : // IMySuperInterface.interface.ts export interface IMySuperInterface<T = any> { handle(arg?: any): Promise<T>; } Essentially, what I require is a shared type for ==> child clas ...

The Unhandled Promise Rejection Warning in mocha and ts-node is due to a TypeError that arises when attempting to convert undefined or null values

I've been encountering issues while setting up ts-node with mocha, as the test script consistently fails. I attempted to run the following commands: mocha --require ts-node/register --extensions ts,tsx --watch --watch-files src 'src/**/*.spec.{ ...

A guide on mapping an array and removing the associated element

I have an array called responseData, which is used to display the available card options on the screen. public responseData = [ { id: 1399, pessoa_id: 75898, created_at: '2022-11-08T16:59:59.000000Z', holder: 'LEONARDO ', validade: ...