I'm encountering a peculiar issue.
Within my CategoryComponent component, I have a variable in scope as follows:
@Input() category: CategoryModel;
Whenever I perform a simple post request using a service and receive data back, I modify this variable. To achieve this, I created a function:
if (category.uploading) {
this.checkMedia(this.category, this.module);
}
Within the checkMedia function, I implement the following logic:
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);
}
However, I am puzzled by the fact that when I make changes within this section:
model.hasMedia = newModel.hasMedia;
model.images = newModel.images;
model.uploading = false;
console.log(model);
console.log(this.category);
clearInterval(refreshIntervalId);
this.cd.detectChanges();
The changes only reflect on the screen when I directly reference the specific variable like this.category.name = "TESTE";. However, when I use it with the parameter model:any, the global variable appears to be updated according to console.log(), but the desired state is not reflected on the front end. Why does this discrepancy occur?