Angulaire 2 ne sera pas mise à jour après un changement de variable dans abonnez-vous

Question

J'ai un problème lorsque mon point de vue ne changera pas lorsque je mets à jour ma variable dans mon observables abonnement. Je suis en train de montrer un chargement spinner pendant que j'attends une réponse de mon backend et puis afficher la réponse, mais le compteur ne cachent 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 vois que isRequesting changements à "false" dans ma console après je reçois une réponse depuis le backend (Springboot), mais l'affichage ne change pas. Le spinner est à partir de SpinKit et j'ai modifié ce tutoriel pour mon spinner de travail.

J'ai essayé:

1. Le chemin dans le tutoriel (avec stopRefreshing() dans l'erreur et de la totalité des paramètres de l'observable)
2. ngZone à force de mon point de vue à la mise à jour.

Quelqu'un a une idée sur la façon d'obtenir mon point de vue, de mettre à jour ou une façon d'obtenir mon spinner pour cacher après je reçois une réponse de mon backend?

Answer 1

observez-vous une erreur sur la console? Cela pourrait être dû au fait que angulaire est pas en cours d'exécution de la détection de changement après avoir fait les mises à jour de la valeur. Je pense que vous n'avez pas besoin d' ngZone.run qu'il va exécuter du 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 en dehors de cette zone Angulaire, alors vous devez en informer angulaire pour exécuter un changement de cycle de détection de cette méthode.

• juste envelopper de mise à jour de isRequesting en set timeout

  setTimeout( () => this.isRequesting = "false", 0);
  

• l'invocation de la détection de changement manuellement

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

Answer 2

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.

Contexte: lors de la modification d'une valeur par l'intermédiaire d' .subscribe() angulaire de ne pas avertir qu'il doit exécuter changedetection. Donc, vous devez l'exécuter vous-même.