订阅中的变量更改后，Angular 2 View将不会更新

本文介绍了订阅中的变量更改后，Angular 2 View将不会更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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.

我尝试过:

教程中的方式(在stopRefreshing()中显示错误和可观察参数的完整参数)

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?

推荐答案

您在控制台上看到任何错误吗? 这可能是由于在对值进行更新后，角度未运行更改检测. 我认为您不需要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(); });