Angular 9 变量未在视图中更新

Question

我的组件中有一个变量，它在使用

console.log(variable)

时正在更新，尽管它没有在我的视图中使用

{{ variable }}

进行更新我已经尝试了几种方法，我的最后一个选择是使用

Observers

并且仍然无法正常工作应该。

我将解释我的代码：

所以我有一个服务、一个基础组件、一个应用程序组件和另一个组件

我的基础组件没有任何视图。它仅实例化服务。就像这样：

  private _communicationService: CommunicationService;
  private _clientService: ClientService;

  constructor(private injector : Injector) {
    this.clientService = this.injector.get(ClientService);
  }

（包括获取和设置）

我的应用程序组件和另一个扩展 BaseComponent

我认为我的实现中错误的是接下来的事情：

我的应用程序组件正在调用我尝试在 ngInit 上实现的

window

函数

export class AppComponent extends BaseComponent implements OnInit{  
  constructor(injector : Injector) {
    super(injector);
  }

  ngOnInit(): void {
    window.FlashExternalInterface.logLoginStep = (step : string) => {
      this.clientService.loadClientProgress(step);
    }
  }
}

我的“其他”组件：

export class LoaderComponent extends BaseComponent implements OnInit {
  public progress = 0;

  constructor(injector : Injector) {
    super(injector);
  }

  ngOnInit(): void {
    this.clientService.clientProgress.subscribe(data => {
      console.log("Data Changing?: " + data);
      this.progress = data;
      console.log("Progress changing??" + this.progress);
    });
  }
}

我的

progress

变量在 F12 控制台中确实发生了变化，但在视图中没有变化。

我尝试过使用

{{ this.progress }}

并且不使用

this.

甚至从基础组件调用直接服务实例

clientService.clientProgress.getValue()

我的意思是，窗口函数在控制台中给我一个错误，例如：

ERROR TypeError: Cannot set property 'logLoginStep' of undefined.

但是，变量在控制台中确实发生了变化。

Answer 1

这可能是一个异步问题，因为在

progress

调用中为

subscribe()

分配了一个值。在客户服务返回数据之前，

progress

不会更新。

您的

console.log

工作的原因是因为它位于您的

subscribe()

块内，因此根据定义，它在登录到控制台之前等待服务返回值。然而，一旦页面加载，您的 HTML 就会被指示呈现

progress

的当前值。即使您的

subscribe()

在

ngOnInit()

内被调用，服务仍然需要非零的时间来返回更新的值，这已经太晚了。

有几种方法可以在 HTML 中处理这个问题

异步管道

<p>{{ progress | async }}<p>

这将监视

progress

变量的更新，并在值更新后直接将更改呈现到 DOM；实际上与

.subscribe()

在 .ts 文件中所做的相同

*ng如果

<p *ngIf="progress">{{ progress }}</p>

在

<p>

变量为真之前，这根本不会渲染

progress

，即在这种情况下不是

0

、

null

或

undefined