javascript - AJAX 导致渲染不一致

Question

我正在使用 Angular2 并有一个模板，如果标志为真，则使用 ngFor 显示 div DIV1，否则显示另一个 div DIV2。在组件的 ngOnInit() 方法中使用 AJAX 从服务器检索此标志。

问题是，如果标志被初始化为 true，bue 检索为 false，那么当页面最初呈现时，DIV1 被呈现并且非常快地消失并显示 DIV2。这很烦人，用户会注意到暂时不一致的 View 渲染(尤其是在 AJAX 调用速度很慢的情况下)。

这是一个简单的案例，因此我没有提供示例，因为我不想在这里测试上述功能是否有效。

问题是我应该如何处理这种情况和类似情况，以便只显示正确的 div？

Answer 1

您可以添加另一个标志来指示该值是否已被检索并将您的内容包装在 *ngIf 中或使用 hidden

<div *ngIf="realValueRetrieved">
<!-- <div [hidden]="realValueRetrieved"> -->
  <div *ngIf="flag">
  </div>
</div>

并设置realValueRetrieved为true，如果是false，否则不要改变它。

实际上，有无数种方法可以处理这个问题，这取决于您真正想要什么。显示微调器，不显示任何内容，在值到达并显示内容时使用动画，....