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

Question

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

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

你可以在主 div 上放置一个 bool 值 loading 来解决这个问题，比如:

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

但我对此并不满意，我想要的是显示一个空窗体，显示一个加载器，一旦我有数据，就显示它...

有什么优雅的方法吗？ (不是像 if user !== null ... for each reference )

Answer 1

可以使用安全导航运算符

{{ user?.name }}

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

{{ 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>