My Angular Webapp doesnt reload view when array changed

I'm working on a clinic queue system, it loads an array with the doctors wait lists for that day, and whenever a patient gets to the office the name and turn number is removed. The database on SQL Server removes the line without problem, and the index number is updated in the console on my browser, but angular doesn't load it.The code for that function is the following:

loadPatientData() {
this.conexionSqlService
.datos(
this.numeroGuardia,
this.numeroGuardia2,
this.numeroGuardia3,
this.numeroGuardia4,
this.numeroGuardia5,
this.numeroGuardia6
)

.then((data) => {
// Revisa cambios en los datos
const newData = data.filter(
(item: { id: any }) =>
!this.turnos.some((existingItem) => existingItem.id === item.id)

);

console.log('Datos nuevos:', newData); // Ver los datos nuevos

//If ther is new data it should update it
if (newData.length > 0) {
this.turnos = [...this.turnos, ...newData];
this.nroTurnos = this.turnos.length;
console.log('el numero es ' + this.nroTurnos);
this.divisionNroTurnos = Math.floor(this.nroTurnos / 2);
// Forzamos la detección de cambios
console.log('Antes de detectChanges');
this.changeDetectorRef.detectChanges();
console.log('detectChanges llamado');

}
})
.catch((error) => {
console.error('Error al cargar pacientes:', error);
});
this.totalTurnos = this.nroTurnos;
}

updateView = () => window.setInterval(() => {
if(this.numeroGuardia== 0 && this.numeroGuardia2 == 0 && this.numeroGuardia3 == 0 && this.numeroGuardia4 == 0 && this.numeroGuardia5 == 0 && this.numeroGuardia6 == 0){
alert("No ha ingresado ningún valor")
} else{
this.llenarDatosPacientes();
console.log('se actualizo');

}
}, 5000);


I've tried deleting and replacing the old array with the new one, but it refreshes the entire page, not only the view of the table.

Continue reading...