订阅中的变量更改后，Angular 2视图将不会更新
我有一个问题，当我更新我的observable订阅中的变量时，我的视图不会改变。我试图在等待后端的响应时显示一个加载微调器，然后显示该响应，但微调器不会隐藏。我的订阅如下所示：
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如下所示：
<spinner *ngIf="isRequesting=='true'"></spinner>在我从后台(Springboot)得到响应后，我可以看到isRequesting在我的控制台中变成了"false“，但视图仍然没有改变。微调器来自SpinKit，我修改了这个tutorial以使微调器正常工作。
我试过了：
使用本教程中的方法(在observable)
- ngZone的
- 参数中使用stopRefreshing() )强制更新我的视图。
有没有人知道如何让我的视图更新，或者有任何方法让我的微调工具在我得到后端的响应后隐藏起来？
回答 4
Stack Overflow用户
发布于 2016-07-19 11:34:12
您是否在控制台上看到任何错误？这可能是因为在您对值进行更新后，angular没有运行更改检测。我认为你不需要ngZone.run，因为它会在角度区外运行代码。
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通过此方法之一运行更改检测周期。
- 仅将isRequesting的更新包装在设置超时中
setTimeout( () => this.isRequesting = "false"，0)；
- 手动调用变更检测
从'@angular/core‘构造函数导入{ChangeDetectorRef} (私有ref: ChangeDetectorRef){} this.questionService.onSubmit(form，this.questions).subscribe( (value)=> {//现有代码console.log(this.isRequesting)；this.ref.detectChanges()；});
Stack Overflow用户
发布于 2016-11-21 02:19:28
您也可以尝试此解决方案：Guide from Thoughtram
简短版本：
import { ChangeDetectorRef } from '@angular/core';
...
constructor(private cd: ChangeDetectorRef) {}
...
... .subscribe( () => {
<yourstuff>
this.cd.markForCheck();
}而且你很棒。
背景:当通过.subscribe()更改一个值时，angular不会通知它应该运行更改检测。所以你需要自己运行它。
Stack Overflow用户
发布于 2019-03-15 15:33:28
您可以通过changeDetection切换(开/关)模板更新。您必须将您选择的策略放入组件定义中。您可以选择Default或OnPush策略。
@Component({
selector: '...............',
templateUrl: '.......html',
styleUrls: ['..........scss'],
changeDetection: ChangeDetectionStrategy.Default
})https://stackoverflow.com/questions/38445670
复制相似问题