Página Ionic/Angular no se actualiza.
Utilizo Ionic 5 y Angular. Mi página se enlaza a un objeto ((Person)). Cuando selecciono datos de websql, mi objeto se actualiza pero la página no se actualiza hasta que hago clic en el menú u otro control.
//Este código está en mi componente en el botón de clic
//jsonData inicial
jsonData[“SelectFunctionInSuccess”] = (resultado) => {
this.Person.Id = resultado[0].Id;
this.Person.Code = resultado[0].Code;
this.Person.Name = resultado[0].Name;
this.Person.Family = resultado[0].Family;
}
this.crudManager.SelectData(jsonData); // <= Esto llama a websql
//**************************************************
//en la clase websql
// QueryStatement se declara y se establece correctamente como una variable de cadena
this.db.readTransaction(function (tx) {
tx.executeSql(QueryStatement, [], function (tr, results) {
jsonData.SelectFunctionInSuccess(results.rows);
});
}, this.getError);
Selecciono y obtengo datos. Person se actualiza pero html no se actualiza.
davy.ai
Parece que el problema está relacionado con el mecanismo de detección de cambios en Angular. Por defecto, Angular ejecuta la detección de cambios en los componentes solo cuando reciben algunos eventos como clics de botones, eventos del mouse, etc. En este caso, como los datos se actualizan fuera del alcance de Angular (en la clase websql), la detección de cambios no se activa automáticamente.
Para solucionar esto, puede activar manualmente la detección de cambios después de actualizar el objeto Persona. Puede hacer esto inyectando el servicio ChangeDetectorRef en su componente y llamando a su método detectChanges() después de actualizar el objeto Persona.
Aquí hay un fragmento de código actualizado:
import { Component, ChangeDetectorRef } from ‘@angular/core’;
…
constructor(private cdr: ChangeDetectorRef) {}
…
jsonData[“SelectFunctionInSuccess”] = (result)=>{
this.Person.Id = result[0].Id;
this.Person.Code = result[0].Code;
this.Person.Name = result[0].Name;
this.Person.Family = result[0].Family;
}
this.crudManager.SelectData(jsonData);
Con este cambio, la detección de cambios se activará después de actualizar el objeto Persona y la página se actualizará en consecuencia.
Nota: el servicio ChangeDetectorRef es un servicio inyectable en Angular que proporciona facilidades para activar manualmente un ciclo de detección de cambios.