Javascript AngularJS ng如果有一个奇怪的延迟

在图中，您可以看到数字旁边有加载微调器

显示微调器的DOM元素具有

ng if=“gridItem.contentScoreLoadingState==“loading”

显示数字的DOM元素具有

ng if=“gridItem.contentScoreLoadingState==“loaded”

代码如下：

<i class="fa fa-spin fa-spinner" style="font-size: 12px;" ng-if="gridItem.contentScoreLoadingState=='loading'"></i>
<span ng-if="gridItem.contentScoreLoadingState=='failed'">-</span>
<span ng-if="gridItem.contentScoreLoadingState=='loaded'">{{ gridItem.content_score }}</span>

-
{{gridItem.content_score}

---

加载结束时，首先显示数字，经过一个小延迟后，加载微调器消失。但有一瞬间，它们同时出现，我不知道为什么。

我试图总结一下，如果您使用该模块，一个潜在的原因可能是ngAnimate（抓住救命稻草，但这在过去给我带来了问题）

无论如何，在您的情况下，使用开关可能更有意义：

<span ng-switch="gridItem.contentScoreLoadingState">
  <span ng-switch-when="loading"><i class="fa fa-spin fa-spinner" style="font-size: 12px;"></i></span>
  <span ng-switch-when="failed">-</span>
  <span ng-switch-when="loaded">{{ gridItem.content_score }}</span>
</span>

-
{{gridItem.content_score}

问题在于我将ng if直接放在图标上，下面的解决方案有效。我可以确认，差不多一年后，这个解决方案有效。

<span ng-switch="gridItem.contentScoreLoadingState">
  <span ng-switch-when="loading"><i class="fa fa-spin fa-spinner" style="font-size: 12px;"></i></span>
  <span ng-switch-when="failed">-</span>
  <span ng-switch-when="loaded">{{ gridItem.content_score }}</span>
</span>