0
221
ViewsAngular y ngModel después de ocultar el formulario
Tengo un formulario que le permite a un empleador editar la información de sus empleados. En Angular, es un formulario basado en plantillas, y estamos usando ngModel para el enlace de datos bidireccional. Al cargar la página, obtenemos la información del empleado de la base de datos y luego pueden editarla. Cosas bastante básicas. Hemos estado haciendo esto por un tiempo, pero ahora estamos agregando un paso de confirmación entre sus ediciones y el guardado en la base de datos.
Decidí hacerlo de modo que al pasar del formulario a la lista de diferencias para que confirmen, el formulario de edición se oculta con *ngIf . Si quieren volver atrás y deshacer los cambios o hacer más cambios, el formulario se muestra de nuevo. Nuevamente, es algo relativamente básico y todo sucede en un componente principal (con múltiples componentes secundarios anidados en su interior).
El problema es que al pasar del formulario al paso de confirmación y luego de vuelta a la edición, el modelo de empleado no muestra los valores en las inputs .
Aquí está el formulario en la carga de la página:
y aquí está después de ir al paso de resumen y luego de vuelta al formulario
Si hago console.log el modelo de empleado cuando voy de un paso a otro, puedo ver la información correcta. Pero no se muestra en la página en las entradas.
Cualquier razón por la cual sería realmente útil. No estoy seguro de qué lo está causando. Sé que no hay muchos detalles aquí, pero es porque no estoy seguro de qué lo está causando y no es un proceso complicado. Con suerte, hay suficiente aquí para que alguien pueda señalarme la dirección correcta.
Editar
Aquí está la función ngOnChanges en el componente de formulario:
Puede ver que lo restablecí a nulo, luego configuré la variable del empleado a lo que se pasó al componente. Esto es lo que muestran esos console.log s:
Pero nuevamente, la plantilla en el navegador no tiene los valores en los campos de entrada, ni muestra los valores al generar la variable del empleado en JSON con esto: {{ employee | json }} .
2 answers
Answer question0
Como no hay código, solo puedo adivinar por mi experiencia. Creo que no marca ngOnChanges en su componente secundario cuando vuelve a mostrar el formulario.
Intenta hacer algo como
ngOnChanges(changes: { [propKey: string]: SimpleChange }) { if (changes.property) { this.property = changes.property.currentValue; // if changeDetection: ChangeDetectionStrategy.OnPush this.ChangeDetectorRef.detectChanges() } }0
Entonces, resulta que esto estaba en la función ngOnInit :
this.employee = new EmployeeClass(); Debe haber sido un remanente desde el principio en el desarrollo. En la carga de la página, funciona bien, probablemente porque se crea la nueva instancia y luego los datos regresan de la base de datos. Pero en este caso, cuando regresa un paso y no está recargando desde la base de datos, esa función ngOnInit anula el ngOnChanges . O algo por el estilo... eso es todo lo que puedo suponer que está sucediendo.