There is no data in the $_POST array from the Http request in Angular or PHP

I've hit a roadblock with a straightforward problem, and despite my best efforts, I haven't been able to find a solution online. Here's the code that I'm struggling with:

const URL = 'http://(...)/scripts/Fiabilisation_Unique.php';
const httpOptions = {
headers: new HttpHeaders({
   'Content-Type: application/json' 
   'reportProgress': 'true'
})
(...)
onClickAdresse(f : NgForm){
var adresse : Adresse= (f.value);
console.log(adresse); //{adresse : "just a french adresse"}
this.http.post(URL, adresse, httpOptions).subscribe(
  (event) => {
    this.temp=(event); // handle event here
    },
  () => {
  console.log("Observable done ! ");
    }
  );
}

But when I check in my 'Fiabilisation_Unique.php' file with a simple print_r($_POST);, it gives me an empty array: Array( )

I have a feeling that the problem isn't too complex, but for the life of me, I can't pinpoint what's wrong. I know the answer is probably just around the corner, but...

Thank you in advance :)

Answer №1

Incorrect HttpOptions settings are causing the issue. The quotation marks and placement of reportProgress need adjustment:

const httpOptions = {
  headers: new HttpHeaders({
   'Content-Type': 'application/json'
  },
  reportProgress: true
});

If you enable reportProgress, the subscribe function will receive multiple events starting from HttpEventType.Sent to HttpEventType.Done. This behavior might be what you intended :)

Answer №2

Hey guys, I've cracked the code! Surprisingly, it was a piece of cake.

All I had to do was include

$angularJSData = json_decode(file_get_contents("php://input"));
in my PHP script.

Big shoutout to all who helped out!

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

What is the best approach to create an isLoggedIn function using Angular Firebase?

Implementing an isLoggedIn method using Firebase in my Angular 6 app has been a challenge. The firebase user object behaves like a "subscription" object, making it difficult to use as a regular method. This is my current implementation: export class Angu ...

Utilize the .mat-column-name attributes to apply custom styles to a nested component within Angular Material

Within the Child component, an Angular material table is created with columns passed as input: <table mat-table> <ng-container *ngFor="let col of columns" [matColumnDef]="col"> </table> @Input() columns: string[] T ...

Develop a TypeScript class in a distinct file

I currently have ag-grid implemented in an Angular project with a CustomFilter. The problem is that the file containing the code for the CustomFilter function is becoming quite large and difficult to manage. I am now looking to move the CustomFilter to a s ...

The input argument must be of type 'PollModel', as the property 'pollId' is required and missing in the provided 'any[]' type

Hey there! An issue popped up when I tried to pass an empty array as a model in my Angular project. The error message reads: "Argument of type 'any[]' is not assignable to parameter of type 'PollModel'. Property 'pollId' is ...

What is the process for retrieving the serial number of a hardware device in Ionic 2?

I recently encountered an issue while trying to retrieve device details. I was able to fetch the UUID of the hardware device, but unfortunately, the serial number was inaccessible. Any suggestions or insights on how to obtain the serial number would be g ...

Troubles with Angular Form Elements: Bridging the Gap Between AbstractControl and FormControl

Encountering an error when trying to use a form with controls. Type 'AbstractControl' is missing the following properties from type 'FormControl': registerOnChange, registerOnDisabledChange, _applyFormState Check out Form Code th ...

Angular Material Textbox with drop shadow

Currently working on a form design and aiming for the input box to resemble the image provided within the angular material matInput framework. Any suggestions on how to accomplish this? Attached is a visual representation of the desired input box appearan ...

Why does Angular2 Router3 not call the Parent Route's Guard every time I navigate between its child routes?

My parent route has a Guard that should be called whenever navigating between child routes. However, I'm facing an issue where the Guard is only triggered when the first child is loaded and not on subsequent switches to other children within the same ...

Troubleshooting Problem with Uploading Several Photos to Firebase Storage

I need assistance with uploading multiple photos to Firebase Storage. Despite my efforts, it seems that the original upload keeps getting overwritten and the folder with the venueID property is not being created. Can someone provide some guidance on this i ...

What is the best way to begin at a specific index in an array without skipping any elements?

As I continue my journey of learning JS, I have encountered a task that has left me quite perplexed. The objective is to provide an index to start from and also include the items missing in the array while displaying them in an angular format. Here is what ...

Setting up a collaborative Angular + Web API environment for multiple developers can be achieved by following these steps

I am curious about how to set up our development environments for Angular + .Net Core Web API with multiple developers. Each developer working on the project may use a different port locally for the API. This means we need individual local settings for ea ...

Using Angular 7 shared service to allow sibling components to exchange data between each other

In my Angular 7 application, I have two sibling components - a configurator component and a custom stepper component. The configurator component is responsible for fetching data from the API and performing calculations on it. I would like to display the ca ...

What is the purpose of exporting both a class and a namespace under the same name?

While exploring some code, I came across a situation where a class and a namespace with identical names were exported from a module. It seems like the person who wrote this code knew what they were doing, but it raised some questions for me. Could you shed ...

Can anyone provide a workaround for bypassing ts 2339 error in order to access class methods? Alternatively, is it feasible to define class methods outside of the class in typescript?

My plan is outlined below class A { constructor() { bind(this); } hello(){ this.method1(); // <-- I will get error at this line saying method one does not exist on typeOf A } } function bind(thisReference) { function method1() { ...

How to Determine the Requirement Status of Input Variables in an Angular 2 Directive?

Is it possible to specify an input variable in a directive as required or optionally as non-required? In the example below, we have set a default value of false. However, if I fail to declare it in the parent component template, ng2 AoT throws an error: ...

My project in WebStorm encounters a setback due to the updated release of Typescript 5+

Recently, I had to upgrade my TypeScript version from 4.9.5 to 5.1.3 because one of the libraries I'm using made a fix that required a newer TypeScript version. After the update, TypeScript started throwing errors for console calls and React event di ...

Encountering a lack of SSR functionality following the transition from Angular 16 to Angular 17

After upgrading my project from Angular 16 to Angular 17, I realized that Server-Side Rendering (SSR) support is not included. Is SSR support provided by Angular when migrating from 16 to 17? Upon creating a new Angular 17 project, I noticed that it inclu ...

I am encountering a strange error in the console when trying to implement a custom navigation system tailored to each user using the core UI Angular

An error occurred at line 33 in the AppSidebarNavItemsComponent.html file. The error message states: "ERROR TypeError: Cannot read property 'length' of undefined". Here is the sequence of events leading up to this error: - The createUrlTree funct ...

What led the Typescript Team to decide against making === the default option?

Given that Typescript is known for its type safety, it can seem odd that the == operator still exists. Is there a specific rationale behind this decision? ...

Restrict the properties of an object to match the properties of a different object

I am currently developing an Object patching utility function with the following code snippet class Test{ a:number; b:number; } var c:Test={a:0,b:1} function patchable<T>(obj:T){ return { patch:function<K>(prop:K){ return patc ...