Estoy pasando un objeto de un componente principal a un componente secundario.
HTML padre relevante:
<app-child-component [parentObj]="parentObj" (childUpdated)="childUpdated($event)"> </app-child-component>Componente hijo:
@Input('parentObj') parentObj: ParentObjType; parentObjToUpdate: ParentObjType; Tomo una copia de parentObj dentro del componente secundario para evitar un problema de referencia circular que tuve anteriormente:
Componente hijo:
ngOnInit() { this.parentObjToUpdate = JSON.parse(JSON.stringify(this.parentObj)); } Cuando el elemento secundario se actualiza, se emite un evento que contiene parentObjToUpdate que escucha el elemento principal:
Componente hijo:
@Output() childUpdated = new EventEmitter<ParentObjType>(); Luego se llama al método childUpdated en el componente principal:
originalObj: ParentObjectType; childUpdated(updatedObj: ParentObjectType) { this.originalObj = updatedObj; // THIS IS THE LINE THAT IS CAUSING THE ISSUE (SEE BELOW) this.httpService.updateObj(this.originalObj).subscribe(() => { console.log("END POINT HIT"); }); }Este es el servicio http:
public updateObj(originalUpdatedObject: ParentObjectType) { return this.http.post<any>(`http://localhost:12345/api/updateObj`, originalUpdatedObject); } Cuando comento la línea anterior: this.originalObject = updatedObj; , se está alcanzando el punto final de .NET y se activa el console.log anterior. Cuando esta línea no está comentada, el punto final no se alcanza y la suscripción no se activa. No hay errores en la consola. Revisé la pestaña de red en las herramientas para desarrolladores de Chrome y no se está realizando ninguna solicitud a la API.
Estoy realmente confundido acerca de por qué sucede esto.
Tenga en cuenta que no puedo simplemente pasar el objeto updatedObj al método de servicio http, ya que necesito actualizar el objeto original en mi escenario. Además, los nombres de los objetos/componentes, etc. se han cambiado de los nombres reales.