AJAX导致渲染不一致

Question

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

问题是如果将标志初始化为true bue，则检索为false，那么当最初呈现页面时，DIV1会呈现并且非常快，它会消失并显示DIV2。这很烦人，用户可以注意到临时不一致的视图呈现（特别是如果AJAX调用很慢）。

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

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

Answer 1

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

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

并将realValueRetrieved设为true，如果是false，则不要更改。{/ p>

实际上有无限的方法来处理它，它取决于你真正想要的东西。显示微调器，不显示任何内容，在值到达时使用动画并显示内容，....