带有 [hidden] 的角加载微调器不会更新

Question

我的程序中有一个 Angular 材质加载微调器，它在调用 REST API 时显示。当 promise 解决时，visible 变量被设置为 false，并且微调器应该消失。

我的问题是微调器在再次设置为 false 时不会更新。我必须在按钮或其他东西上手动触发工具提示，然后页面才会隐藏微调器。

我知道变量设置正确，但页面在它应该消失时没有更新微调器状态。显示正常。

状态设置和取消设置在同一个函数中的问题吗？

这是模板

<div [hidden]="!visible" class="row justify-content-center">
      <mat-spinner></mat-spinner>
</div>

当我点击更新按钮时，this.visible = true; 被调用。 然后，一个 http 服务被调用：

this.httpService.getData(data).then(receivedData => {
    [...]
    this.visible = false;    // this is called correctly, but does not change the visibility.

但是微调器还在，连同现在绘制的所有图表：

我该如何解决这个问题？微调器应该不再可见，但只有在我将鼠标悬停在按钮或其他元素上后才会消失。

Answer 1

您可能在组件中使用 OnPush 策略。注入 ChangeDetectorRef 并尝试调用它的 detectChanges 方法。