Tengo un problema extraño.
En mi componente CategoryComponent tengo una variable en alcance que es:
@Input() categoría: CategoríaModelo;
Cuando hago una publicación simple con un servicio y devuelvo datos, cambio esta variable para cambiar, así que hago una función que hace esto:
if (category.uploading) { this.checkMedia(this.category, this.module); }Dentro de mi función hago esto:
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); }Por qué en esta parte:
model.hasMedia = newModel.hasMedia; model.images = newModel.images; model.uploading = false; console.log(model); console.log(this.category); clearInterval(refreshIntervalId); this.cd.detectChanges();Mi pantalla cambia solo si hago referencia a esta variable directamente como this.category.name = "TESTE"; , por ejemplo, pero cuando uso con el modelo de parámetro: cualquiera , cambia la variable global cuando veo en console.log() pero en mi página principal el estado que quiero no cambia ¿por qué?
LA PREOCUPACIÓN PRINCIPAL
La parte que no entiendo, ¿qué estás haciendo con el modelo? ¿Por qué no estás usando this.model ? Esperaría que hiciera referencia al modelo en su HTML en algún lugar y, por lo tanto, necesitaría actualizar una variable miembro de clase this.model = {blah-blah-blah} . ¿Ha declarado un modelo de propiedad pública en algún lugar de su clase? ¿Por qué no se actualiza? En tu clase necesitas declarar:
@Input() category: CategoryModel; model: any;Y luego en tu código:
this.model = somethingY luego en tu html:
{{ model | json }}OTROS PROBLEMAS POTENCIALES
¿Qué estrategia de detección de cambios está utilizando? OnPush o por defecto? No debe usar OnPush a menos que esté seguro de ello. Es posible que debido a que está mutando la detección de cambio de modelo no se active. Debe evitar la mutación de objetos. Para solucionar esto, intente agregar esta línea:
model.hasMedia = newModel.hasMedia; model.images = newModel.images; model.uploading = false; model = {...model}; // creates a new object reference which will cause Angular change detection to kick inO
import {cloneDeep} from 'lodash-es'; model.hasMedia = newModel.hasMedia; model.images = newModel.images; model.uploading = false; model = cloneDeep(model); // creates a new object reference which will cause Angular change detection to kick inEncuentro el segundo enfoque más legible. Déjame saber si funciona. Mis mejores deseos.
Esto es mutación (MALO):
model.hasMedia = newModel.hasMedia; model.images = newModel.images; model.uploading = false;Esto no es mutación (BUENO):
model = { ...model hasMedia: newModel.hasMedia; images: newModel.images; uploading: false; }EDITAR... USANDO VALORES DEVUELTOS
this.checkMedia(this.category, this.module).then((cat) => { this.category = cat; }); y devolver un valor de checkMedia
checkMedia(model: any, module: String): Promise<any> { return new Promise((resolve) => { // your existing code resolve(model) }) }