Hice un formulario angular 2 basado en modelos con campos anidados. Uno de estos campos es un campo numérico y estoy usando un complemento jquery para hacer un formato numérico. Creé una directiva para iniciar este complemento cuando se agrega una nueva línea de entrada, pero cuando agrego una nueva línea, se debe dividir un total entre todas las líneas, es una cantidad. Esta división la hice en una función en mi modelo para actualizar los campos en el formGroup.
Mi problema es que la vista muestra el nuevo valor para cada línea, pero el complemento está formateando este campo y el navegador solo muestra el campo formateado cuando coloco el cursor del mouse sobre él. Parece que angular no está actualizando la vista como debería.
Aquí hay algunas imágenes sobre lo que está sucediendo:
Primero, cuando aparece la capa, el primer campo en la parte superior no se muestra formateado, pero lo está.
Así es como se muestra después de mover el mouse:
Agregué algunas líneas, mira cómo se muestran:
Y después de mover el mouse sobre:
PD: No me digas "no deberías usar jquery con angular, bla, bla, bla...". Lo sé, pero necesitaba usarlo.
Mi mejor suposición es que los cambios que está realizando se realizan fuera de Angular, por lo tanto, su motor de detección de cambios no está al tanto de los cambios. Una forma sencilla de forzar esto es usando setTimeout
setTimeout(() => { // Code that modify model values go here })