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

Question

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

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”，但 View 仍然没有改变。微调器来自 SpinKit我修改了这个tutorial让我的微调器工作。

我试过:

1. 教程中的方式(在observable的error和complete参数中有stopRefreshing())
2. ngZone 强制更新我的 View 。

有没有人知道如何让我的 View 更新，或者有什么方法可以让我的微调器在我收到后端响应后隐藏？

Answer 1

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

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 通过这两种方法中的任何一种运行变化检测周期。

• 在设定的超时时间内包装 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();
  });