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

Question

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

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

你可以解决这个问题，主要 div 一个布尔值 loading，比如：

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

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

有什么优雅的方法吗？（不是每个参考文献都像 if user !== null ... ）

Answer 1

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

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

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

Strategy to display form while data is still loading with Angular 6

http

angular

angular6