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

Question

我有一个问题，当我在我的可观察订阅中更新我的变量时，我的视图不会改变。我正在尝试显示加载微调器，同时我等待来自后端的响应，然后显示响应，但微调器不会隐藏。我的订阅看起来像这样：

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让我的旋转器工作。

我试过了：

1. 教程中的方法（错误中的stopRefreshing（）和observable的完整参数）
2. ngZone强制我的视图更新。

有没有人有任何想法如何让我的观点更新或任何方式让我的微调器隐藏后我从我的后端收到回复？

Answer 1

你在控制台上看到任何错误吗？这可能是因为在更新值后，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区域外运行，那么你应该告知angular通过这种方法之一运行一个变化检测周期。

• 只需在set timeout中包装isRequesting的更新 setTimeout( () => this.isRequesting = "false", 0);
• 手动调用更改检测

  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

您也可以尝试这个解决方案：Guide from Thoughtram

精简版：

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

你很好

背景：通过.subscribe（）更改值时，angular不会通知它应该运行changedetection。所以你需要自己运行它。

Answer 3

如果你在表达式中使用它* ngIf记住* ngIf = false将不会像你需要添加的表达式那样工作

 <ul *ngIf=" somefunction(x) ? false: true">
 

Answer 4

您可以通过changeDetection切换（打开/关闭）模板更新。您必须将您选择的策略放入组件定义中。您可以选择默认或OnPush策略。

@Component({
    selector: '...............',
    templateUrl: '.......html',
    styleUrls: ['..........scss'],
    changeDetection: ChangeDetectionStrategy.Default
})