Tengo algunos gráficos del plan de atención para residentes y uso el mismo componente para cada gráfico, que llama a la misma API, pero con datos de entrada diferentes. Tengo un selector de fechas en un componente principal y cuando se actualiza esta fecha, quiero actualizar todos los gráficos. Cada componente del gráfico debe llamar a la API con la misma fecha y una identificación diferente, pero las llamadas se realizan de la misma manera.
Tengo un componente principal con componentes secundarios en un *ngFor:
<div *ngFor="let data of selectedItems"> <app-care-plan-graph [careData]="data" [dateInput]="dateInput"> </app-care-plan-graph> </div>Y desde cada CarePlanGraphComponent realizo una llamada posterior a la API:
@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 }) }La llamada de servicio es una publicación http común:
getAdlEvents(body): Observable<any> { return this.http.post(this.residentsBaseUrl + 'getAdlEvents', body); }En el componente principal, uso ViewChildren para acceder a los componentes de carePlanGraph y llamo al método getAdlEvents() al actualizar la vista.
@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); }); }) }Todo funciona bien hasta el archivo console.log antes de realizar la publicación de la API, pero la publicación se realiza siempre con el mismo cuerpo de solicitud, sin importar que el registro de la consola muestre que tiene ID diferentes. Puedo ver en la pestaña de red que el payload es el mismo, aquí hay algunas imágenes de un ejemplo, en la consola puedes ver que hay dos cuerpos diferentes, uno con id 60 y otro con id 61, pero ambas publicaciones de API eran hecho con payload con id 61: 1st payload: 1st payload
2da carga útil: 2da carga útil
Se agradecerá cualquier ayuda para comprender este problema, por ahora moveré las publicaciones de Api al componente principal y usaré concatMap para que las publicaciones se realicen secuencialmente y pasen los datos a los niños, pero realmente me gustaría entender por qué esto manera no funciona.
La razón por la que esto sucede es que está llamando a la solicitud realmente con el mismo cuerpo.
Los objetos en Javascript se pasan como referencia a los mismos objetos.
Dado que pasa el objeto como un cuerpo a la llamada a la API en el primer Gráfico y luego modifica el mismo objeto en el segundo Gráfico, da como resultado la misma llamada a la API.
Lo mejor que puede hacer es copiar el cuerpo de la solicitud cada vez que realiza la llamada. Esto se logra fácilmente a través del operador de propagación (...).
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 }) }