Angular 2 View wird nach einer Variablenänderung in subscribe nicht aktualisiert

Ich habe ein problem, wo meine Ansicht wird sich nicht ändern, wenn ich update meine variable in meinem beobachtbaren Abonnement. Ich versuche zu zeigen, ein lade-spinner, während ich warte auf eine Antwort von meinem backend und zeigt dann die Reaktion, aber der spinner nicht verstecken. Mein Abo sieht so aus:

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

Und mein html-Code für diese Komponente sieht wie folgt aus:

<spinner *ngIf="isRequesting=='true'"></spinner>

Kann ich sehen, dass isRequesting ändert sich auf "false" in meine Konsole, nachdem ich eine Antwort zurück aus dem backend (Springboot), aber die Ansicht noch nicht geändert. Der spinner wurde von SpinKit und ich geändert in diesem tutorial für meine spinner zu arbeiten.

Habe ich versucht:

  1. Den Weg in das tutorial (mit stopRefreshing (), in der Fehler und die vollständige Parameter der beobachtbaren)
  2. ngZone zu zwingen meine Ansicht zu aktualisieren.

Hat jemand irgendwelche Ideen auf, wie man meine Ansicht zu aktualisieren oder zu irgendeiner Weise um meine spinner zu verstecken, nachdem ich eine Antwort bekommen von meinem backend?

InformationsquelleAutor der Frage D. Simon | 2016-07-18

  1. 38

    werden Sie sehen eine Fehlermeldung auf der Konsole?
    Dies könnte aufgrund der Tatsache, dass eckig nicht ausgeführt wird, ändern Sie die Erkennung nach updates Wert.
    Ich denke, Sie brauchen nicht ngZone.run wie es laufen wird, code außerhalb des Winkel-zone. 

    this.questionService.onSubmit(form, this.questions).subscribe( (value) => {
            this.fileLocation = JSON.stringify(value);
            console.log(this.fileLocation);
            this.isRequesting = "false";
            console.log(this.isRequesting);
    });

    Wenn wegen irgendeinem Grund, Sie müssen führen Sie diese außerhalb Winkel-zone, dann sollten Sie informieren eckig zu laufen, eine change-detection-Zyklus, die von dieser Methode.

    • nur wickeln update von isRequesting in set timeout

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

    • aufrufen ändern Sie die Erkennung manuell

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

    InformationsquelleAutor der Antwort Arpit Agarwal

  2. 10

    Können Sie auch versuchen, diese Lösung: Guide von Thoughtram

    Kurze version: 

     import { ChangeDetectorRef } from '@angular/core';
    ...
    constructor(private cd: ChangeDetectorRef) {}
    ...
    ... .subscribe( () => {
           <yourstuff>
           this.cd.markForCheck();
        }

    und Sie sind gut.

    Hintergrund: beim ändern eines Wertes über .subscribe () - Winkel nicht bekannt, dass es laufen sollte changedetection. So müssen Sie die Ausführung selbst.

    InformationsquelleAutor der Antwort Flosut Mözil

Schreibe einen Kommentar