订阅中的变量更改后，Angular 2 View 不会更新 [英] Angular 2 View will not update after variable change in subscribe

问题描述

我有一个问题，当我在可观察订阅中更新我的变量时，我的视图不会改变.我试图在等待后端响应时显示加载微调器，然后显示响应，但微调器不会隐藏.我的订阅如下所示:

I have a problem where my view will not change when I update my variable in my observable subscription. I am trying to show a loading spinner while I wait for a response from my backend and then display the response, but the spinner won't hide. My subscription looks like this:

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

我的这个组件的 html 看起来像这样:

And my html for this component looks like this:

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

在我从后端 (Springboot) 得到响应后，我可以在控制台中看到 isRequesting 更改为false"，但视图仍然没有改变.微调器来自 SpinKit，我修改了这个 教程让我的微调器工作.

I can see that isRequesting changes to "false" in my console after I get a response back from the backend (Springboot), but the view still does not change. The spinner was from SpinKit and I modified this tutorial for my spinner to work.

我试过了:

1. 教程中的方式(错误中带有stopRefreshing()，observable的参数完整)
2. ngZone 强制我的视图更新.

有没有人知道如何让我的视图更新或在我从后端得到响应后以任何方式让我的微调器隐藏?

Does anyone have any ideas on how to get my view to update or any way to get my spinner to hide after I get a response from my backend?

推荐答案

您是否在控制台上看到任何错误?这可能是因为在您对值进行更新后，angular 没有运行更改检测.我认为您不需要 ngZone.run 因为它会在角度区域之外运行代码.

are you seeing any error on console? This could be due to fact that angular is not running change detection after you have made updates to value. I think you don't need ngZone.run as it will run code outside the angular 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);
    });

如果由于某种原因你需要在 Angular 区域之外运行这个，那么你应该通知 angular 通过这个方法中的任何一个来运行一个变更检测周期.

If due to some reason you need to run this outside Angular zone, then you should inform angular to run a change detection cycle by either of this method.

• 只需在设置的超时时间内包装 isRequesting 的更新

• just wrap update of isRequesting in set timeout

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

手动调用变更检测

invoking change detection manually

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

这篇关于订阅中的变量更改后，Angular 2 View 不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！