Why in my Angular application using typescript, is not changing my variable inside a function...

I'm having a strange problem.

In my component CategoryComponent i have a variable in escope that is:

@Input() category: CategoryModel;

When i make a simple post with a service and return a data i change this variable to change so i make a function that do this:

if (category.uploading) {
this.checkMedia(this.category, this.module);
}


Inside my function i make this:

checkMedia(model: any, module: String) {
let counter = 0;
var refreshIntervalId = setInterval(() => {
const service =
model instanceof CategoryModel
? this.categoryService
: this.foodService;
service
.hasMedia(model)
.pipe(
switchMap((hasMedia) => {
if (hasMedia) {
return service.show(model, module);
}
return of(undefined);
}),
catchError((_) => {
clearInterval(refreshIntervalId);
return of(undefined);
})
)
.subscribe(
(newModel) => {
if (newModel) {
if(newModel.hasMedia) {
model.hasMedia = newModel.hasMedia;
model.images = newModel.images;
model.uploading = false;
console.log(model);
console.log(this.category);
clearInterval(refreshIntervalId);
this.cd.detectChanges();
}
}
},
(_) => {
clearInterval(refreshIntervalId);
}
);
counter++;
if (counter == 3) {
if (refreshIntervalId) {
model.uploading = false;
clearInterval(refreshIntervalId);
this.cd.detectChanges();
}
}
}, 8000);
}


Why in this part:

model.hasMedia = newModel.hasMedia;
model.images = newModel.images;
model.uploading = false;
console.log(model);
console.log(this.category);
clearInterval(refreshIntervalId);
this.cd.detectChanges();


My screen change only if i reference this variable directly like, this.category.name = "TESTE";, for example but when i use with the paremeter model:any, it's change the global variable when i see in console.log() but in my front page the state that i want is not changing why?

Continue reading...