Angular-ngIf条件在"初始渲染"上显示这两个数据

Question

在我的Angular项目中，我从API获取数据并在前端显示。我使用ngIf显示数据，如果没有可用的数据，则显示elseNotDone。

我面临的问题是，当组件重新加载时，我首先看到No Data available几毫秒，然后显示数据

如何确保初始渲染时不显示其他条件

<section *ngIf="data!== undefined && data.length > 0; else elseNotDone">
<h2>Amazon Data</h2>
<div>
// display data from API
</div>
</section>
<ng-template #elseNotDone>
No Data available
</ng-template>

Answer 1

这是因为组件在数据到达之前进行初始化。一旦数据到达，组件就可以使用它

我强烈建议学习有关角度解析程序的知识，该程序可防止组件在数据可用之前初始化。这允许您实现诸如loader/spinners/etc之类的东西，这些东西在获取数据时出现。

编辑：根据Angular文档：https://angular.io/api/router/Resolve

Answer 2

不必要地使其复杂化：

*ngIf="data !== undefined && data.length > 0; else elseNotDone"

更改为：

*ngIf="data && data.length > 0; else elseNotDone"

对于您的主要问题：创建一个变量isLoaded并将代码封装在其中：

<div *ngIf="isLoaded">
.... your code...
</div>

在加载数据之前显示任何内容将解决您的问题。

Answer 3

用isLoaded条件将代码包装在ng容器中，您应该"真"；如果您从API 获得响应，则该变量

<ng-container *ngIf="isLoaded">
<section *ngIf="data && data.length > 0; else elseNotDone">
<h2>Amazon Data</h2>
<div>
// display data from API
</div>
</section>
<ng-template #elseNotDone>
No Data available
</ng-template>
</ng-container>