Question

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

例如，如果您正在加载对象用户，并且在通过HTTP请求数据时引用了user.name，则控制台将为您显示错误unable to find name attribute on null或类似内容。

您可以将布尔值loading放在主div上，例如：

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

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

有一种优雅的方法吗？（每个引用都不是if user !== null ...之类的东西）

Answer 1

您可以使用安全的导航操作符

{% endblock %}

或Javascript处理未定义值的本机方式

{% block page %}

或者您可以显示一个装载器，例如这个

{{ user?.name }}

{{ 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); }
}

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

1 个答案: