0
326
VistasAngular no detecta cambios dentro de un selector de duración cuando se selecciona el tiempo usando sus controles
Tengo un selector de duración html dentro de mi código como se muestra a continuación. Puedo escribir la hora o cambiar la hora haciendo clic en las flechas arriba/abajo.
Estoy vinculando su valor a una variable usando ngModel
<input type="text" id="mTime" [class] = "'html-duration-picker'" [(ngModel)]="manufacturingTime">También tengo otro campo de texto que muestra el resultado de la duración del tiempo dividido por otro valor. Por lo tanto, cuando se cambia la duración del tiempo, este campo debe actualizarse sobre la marcha.
<input name="assemblyTime" class="form-control right" [disabled] = true [ngModel]="(manufacturingTime/numberOfWorkers)">Todas estas funcionalidades funcionaban bien. Recientemente, pasé de la versión angular 11 a la V 13. Desde entonces, cuando se cambia la hora haciendo clic en las flechas arriba/abajo, no se actualiza el ngModel, mientras que si se ingresa la hora, se actualiza el ngModel. Intenté agregar código en (cambio), (ngChange), también intenté usar changeDetection. Pero parece que angular no reconoce el cambio de valor cuando se hace con las flechas arriba/abajo. Entonces estos eventos no se disparan. Puedo acceder a la duración usando ViewChild para guardar la duración en la base de datos. Pero el segundo cuadro de texto que muestra el valor dividido no se puede actualizar sobre la marcha. ¿Alguien puede sugerir una manera de arreglar esto?
El selector de duración es una herramienta de terceros desarrollada en Javascript. https://nadchif.github.io/html-duration-picker.js/ Entonces no puedo controlar los eventos en los clics de flecha.
2 Respuestas
Responde la pregunta0
Sospecho que esto puede funcionar, ya que podría hacer que la expresión se evalúe con más frecuencia.
- En su clase de componente, agregue un getter que calcule el valor dividido de la siguiente manera:
public get dividedValue(): number { return this.manufacturingTime / this.numberOfWorkers; }- Luego asigne ese valor a la segunda entrada:
<input name="assemblyTime" class="form-control right" [disabled] = true [ngModel]="dividedValue">Nuevamente, esto es solo una suposición descabellada, porque no tengo ningún código para ejecutar. Si proporciona un ejemplo ejecutable de Stackblitz, me complacerá ayudarlo a depurarlo.
0
Si observa el código html-duration-picker , en la definición de la función para cambiar valores usando las teclas de flecha changeValueByArrowKeys ; la última línea:
insertFormatted(inputBox, constrainedValue, false);
tiene un tercer argumento false que se pasa a la función insertFormatted . Esta función insertFormatted crea los eventos (change) o (input) .
En la imagen de arriba, puede ver que cualquier evento, ya sea (change) o (input) , solo se activa si dispatchSynethicEvents no es igual a false .
Para manejar esto, puede crear una bifurcación de la biblioteca, realizar cambios en ella, almacenar una copia local y usarla en lugar de la biblioteca. Alternativamente, podría plantear un PR y pedirle al autor que considere su cambio.
Para resolverlo, básicamente debe eliminar esa condición. Luego emitirá (input) un evento sin importar qué.