Angular multiple HTTP posts to same API with different request body sends the same request-CodePudding

I have a few graphs of resident care plan, and I use the same component for each graph, that calls the same API, but with different input data. I have a datepicker in a parent component and when this date is updated I want to update all the graphs. Each graph component should call the API with same date and different id, but the calls are being made all equals.

I have a parent component with children components on an *ngFor:

<div *ngFor="let data of selectedItems">
    <app-care-plan-graph 
        [careData]="data" 
        [dateInput]="dateInput">
    </app-care-plan-graph>
</div>

And from each CarePlanGraphComponent I make an API post call:

  @Input() careData: {careAdlId:any};
  @Input() dateInput: GetAdlEventRequest;
  constructor(private residentService: ResidentService) { }
  ngOnInit() {
    this.getAdlEvents(this.dateInput);
  }
  getAdlEvents(body: GetAdlEventRequest) {
    body.careAdlId = this.careData.careAdlId;
    console.log("calling get adl events: ", body);
    this.residentService.getAdlEvents(body).then((response: ApiResponseModel) => {
      // handle response
    })
  }

The service call is a common http post:

  getAdlEvents(body): Observable<any> {
    return this.http.post(this.residentsBaseUrl   'getAdlEvents', body);
  }

On parent component I use ViewChildren to access to the carePlanGraph components and call the method getAdlEvents() on update of the view

  @ViewChildren(CarePlanGraphComponent) graphComponents: QueryList<any>;
.
.
.
  ngOnInit() {
    this.form.valueChanges.subscribe(data => {
      this.dateInput= {
        startDate: data.startDate,
        endDate: data.endDate
      };
      this.graphComponents.forEach(element => {
        element.getAdlEvents(this.selectedInputs);
      });
    })
  }

Everything works fine up to the console.log before making the API post, but the post is being made allways with same request body, no matter that the console log shows that it has different ids. I can see in the network tab that the payload its the same, here are some images of an example, in the console you can see that there are two different bodys, one with id 60 and other with id 61, but both API post were made with payload with id 61: 1st payload: 1st payload

2nd payload: 2nd payload

Any help on understanding this problem will be appreciated, for now I will move the Api posts to the parent component and use concatMap so that the post are made sequentially, and pass the data to the children, but I would really like to understand why this way is not working.

CodePudding user response：

The reason this is happening is that you're calling the request really with the same body.

Objects in Javascript are passed as a reference to the same obejcts.

Since you pass the object as a body to the API call in the first Graph and then modify the same object in the second Graph, it results in the same api call.

Best thing you can do is copy the body request each time you make the call. This is easily achieved via the spread operator (...).

  getAdlEvents(body: GetAdlEventRequest) {
    // copy the body and add care id
    body = {...body, careAdlId: this.careData.careAdlId};
    console.log("calling get adl events: ", body);
    this.residentService.getAdlEvents(body).then((response: ApiResponseModel) => {
      // handle response
    })
  }