时间戳

首页 > 解决方案 > 在使用 Angular 6 加载数据时显示表单的策略

angular - 在使用 Angular 6 加载数据时显示表单的策略

问题描述

通过 HTTP 加载数据时，我总是遇到很多错误。

例如，如果你正在加载一个对象用户，并且你引用了 user.name，当通过 HTTP 请求数据时，控制台会给你一个错误unable to find name attribute on null，或者类似的东西。

您可以在主 div 上放置一个 boolean 来解决此问题loading，例如：

<div class="main" *ngIf="!loading">
  {{ user.name }}
</div>

但我对此并不满意，我想要的是显示一个空表单，显示一个加载程序，并且一旦我有了数据，就显示它......

有没有一种优雅的方式来做到这一点？（不是if user !== null ...每个参考的东西）

标签： angularhttpangular6

解决方案

您可以使用安全导航运算符

{{ user?.name }}

或者 Javascript 处理未定义值的原生方式

{{ user && user.name }}

或者你可以显示一个加载器，例如这个

.loader {
  margin: auto;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  border-top: 2px solid coral;
  border-right: 2px solid transparent;
  animation: spin 0.7s ease-in-out infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
<div class="loader"></div>

以你的条件

<div *ngIf="!loading">{{ user.name }}</div>
<div class="loader" *ngIf="loading"></div>

推荐阅读