特定div上的微调器条持续一段时间

Question

我正在做一个有角度的项目，我想在特定的div上播放微调条。

我的组件文件中有一个函数，它调用API并返回结果。我想做的是，当我调用该函数时，我希望在div上显示微调器栏，一旦函数返回所有结果，我就希望隐藏微调器栏。

到目前为止，我已经尝试过这样的方法，但没有成功。

初始化了component.ts文件中的布尔变量。

let isLoopStarted : boolean = false;

在我的HTML文件中，我做了这样的操作。

<img src = "someGif.gif" [hidden] = "!isLoopStarted">

当我调用函数时，我将isLoopStarted的值设置为true。div上开始显示Spinner条。现在，当函数即将终止时，我再次将isLoopStarted的值设置为false。Spinner栏应该隐藏，但它没有，并且一直显示在div上，直到我刷新页面。

Answer 1

您需要确保angular已经检测到组件范围的变化。您可以通过使用AJAX调用的@angular/http模块来实现这一点，也可以使用changeDetectorRef。请参见此示例：https://angular.io/api/core/ChangeDetectorRef#example

Answer 2

您需要使用这样的东西：

<div *ngIf="isLoopStarted ; else dataReady">
<img src = "someGif.gif">
</div>
<ng-template #dataReady>
...your rest of the component which you want to show/hide
</ng-template>            

此外，请确保isLoopStarted变量正在更改。