J'ai un problème où ma vue ne changera pas lorsque je mettrai à jour ma variable dans mon abonnement observable. J'essaie de montrer un spinner de chargement pendant que j'attends une réponse de mon backend, puis d'afficher la réponse, mais le spinner ne se cache pas. Mon abonnement ressemble à ceci:
this.isRequesting = "true";
this.questionService.onSubmit(form, this.questions).subscribe( (value) => {
this._ngZone.run( () => {
this.fileLocation = JSON.stringify(value);
console.log(this.fileLocation);
this.isRequesting = "false";
console.log(this.isRequesting);
});
});
Et mon code html pour ce composant ressemble à ceci:
<spinner *ngIf="isRequesting=='true'"></spinner>
Je peux voir que isRequesting passe à "false" dans ma console après avoir reçu une réponse du serveur (Springboot), mais la vue ne change toujours pas. Le spinner était de SpinKit et j'ai modifié ce tutoriel pour que mon spinner fonctionne.
J'ai essayé:
Quelqu'un a-t-il des idées sur la façon de mettre à jour mon point de vue ou sur un moyen de cacher ma visière après que je reçois une réponse de mon backend?
voyez-vous une erreur sur la console? Cela peut être dû au fait qu'angular n’exécute pas la détection des modifications après avoir mis à jour la valeur. Je pense que vous n'avez pas besoin de ngZone.run
car il exécutera le code en dehors de la zone angulaire.
this.questionService.onSubmit(form, this.questions).subscribe( (value) => {
this.fileLocation = JSON.stringify(value);
console.log(this.fileLocation);
this.isRequesting = "false";
console.log(this.isRequesting);
});
Si, pour une raison quelconque, vous devez exécuter cette opération en dehors de la zone angulaire, vous devez indiquer à angular de lancer un cycle de détection des modifications par l'une des méthodes suivantes.
juste envelopper la mise à jour de isRequesting dans le délai imparti
setTimeout( () => this.isRequesting = "false", 0);
invoquer manuellement la détection de changement
import {ChangeDetectorRef} from '@angular/core'
constructor(private ref: ChangeDetectorRef){}
this.questionService.onSubmit(form, this.questions).subscribe( (value)=> {
//existing code
console.log(this.isRequesting);
this.ref.detectChanges();
});
Vous pouvez également essayer cette solution: Guide de Thoughtram
Version courte:
import { ChangeDetectorRef } from '@angular/core';
...
constructor(private cd: ChangeDetectorRef) {}
...
... .subscribe( () => {
<yourstuff>
this.cd.markForCheck();
}
et vous êtes bon.
Arrière-plan: lorsque vous modifiez une valeur via .subscribe (), angular n’indique pas qu’elle doit exécuter modifiedetection. Donc, vous devez l'exécuter vous-même.
si vous l'utilisez dans l'expression * ngSi souvenez-vous * ngIf = false ne fonctionnera pas comme expression, vous devez ajouter
<ul *ngIf=" somefunction(x) ? false: true">