web-dev-qa-db-fra.com

La vue angulaire 2 ne sera pas mise à jour après un changement de souscription variable

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é:

  1. Le chemin dans le tutoriel (avec stopRefreshing () dans l'erreur et les paramètres complets de l'observable)
  2. ngZone pour forcer ma vue à mettre à jour.

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? 

typescriptangular
44
D. Simon

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();
});
67
Arpit Agarwal

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.

15
Flosut Mözil

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">

0
user3627284