AJAX 导致渲染不一致

【问题标题】：AJAX causes inconsistent renderingsAJAX 导致渲染不一致
【发布时间】：2016-06-04 05:58:38
【问题描述】：

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

问题是，如果标志被初始化为真 bue 检索为假，那么当页面最初呈现时，DIV1 被呈现并且非常快它消失并显示 DIV2。这很烦人，用户会注意到视图呈现暂时不一致（尤其是在 AJAX 调用很慢的情况下）。

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

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

【问题讨论】：

【解决方案1】：

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

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

如果是false，则将realValueRetrieved设置为true，否则不要更改。

实际上有无限的方法来处理它，这取决于你真正想要什么。显示一个微调器，什么都不显示，当值到达并显示内容时使用动画，....

【讨论】：